Prevent or reverse CSS rotation from getting applied on child elements

Question

I have noticed that if you apply a rotate or skew on a parent element then to reverse it you can simple reverse the value on the child (simply putting opposite signs to the value, like if it is -10 for parent make it 10 for child).

//transform applied on parent
transform: rotateX(10deg);

//the following works on the child to reverse the transform
transform: rotateX(-10deg);

However when you apply multiple rotate or skew (or their combination) transforms you can not use the same method to reverse the values. Which means there should be some logic behind finding the correct reversal value. Please let me know how to reverse if you have applied rotate or skew (or their combination) on multiple axis such as

//if parent uses any transform similar to the following how can I reverse it on the child?
transform: rotateX(10deg) rotateY(15deg) rotateZ(5deg);
transform: rotateX(10deg) skew(15deg);
transform: rotateX(10deg) skew(15deg, 5deg);

The *order* of the transforms is important so you may have to reverse the order on the child. — Paulie_D, Feb 02 '21 at 20:53
Genius! This perfectly worked for me! Thanks a ton. It was enlightening... — Temp O'rary, Feb 02 '21 at 21:01
related: https://stackoverflow.com/q/53671968/8620333 / https://stackoverflow.com/a/51080643/8620333 — Temani Afif, Feb 02 '21 at 21:19
@Paulie, This is still not very much accurate. If you look at your own example the child does not come back to its original form after the reverse rotation is applied. (compare the reverse rotation applied form and the no rotation on parent as well as child state) — Temp O'rary, Feb 03 '21 at 12:20
remove negative from rotateX. We need to reverse order but not apply to all of them negative values — Temani Afif, Feb 03 '21 at 12:28
^ or remove negative from rotateY. Only one of them need to have negative sign — Temani Afif, Feb 03 '21 at 12:29
Even now, its not exactly same. Try keeping a cloned reference square to compare. — Temp O'rary, Feb 03 '21 at 12:36
This does not work even now. Please check this http://jsfiddle.net/L9nefum0/1/ The blue box is a reference box. — Temp O'rary, Feb 03 '21 at 15:00

Prevent or reverse CSS rotation from getting applied on child elements

0 Answers0