how do you unrotate a child element if its parent element is rotated?

Question

The goal is to have the child element rotated by its parent element but once you click the child element it animates to how it would be if there were no rotates applied to the parent element. So basically I am just trying to take the rotates from the parent element off.

WIN - rotateZ(ndeg) on the parent and rotateZ(-ndeg) on the child
FAIL - rotateXY(ndeg) on the parent and rotateXY(-ndeg) on the child

fiddle

Answer 1

To understand, the the child of the rotated divs are making their transformation from their parents point, so from rotateX(50) the child is doing a rotateX(-50) from "0" but it isn't "0" persay, which won't give you what you are expecting.

What you need to do is wrap everything and treat them separately so that the "parent" doesn't actually affect the child. Then you can reverse it properly.

http://jsfiddle.net/arGWr/1/

<div class="wrapper">
    <div class="outerX"></div>
    <div class="inner1X"></div>
    <div class="inner2X"></div>
</div>

edit: to better explain, in the original solution, you have a square. It changes to a rectangle, now when you do a rotate on that - it's doing it on the rectangle, compounding on the rotate. It doesn't know you are trying to reverse a previous transformation.