CODEWITHSUNDEEP
csscss-transforms
user1873073
user1873073

Reputation: 3660

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

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

enter image description here

fiddle

Upvotes: 6

Views: 2630

Answers (2)

Max
Max

Reputation: 477

you can try adding this to the parent 

-webkit-transform-style: preserve-3d;

Reference: http://www.webkit.org/blog-files/3d-transforms/transform-style.html

Upvotes: 0

David Nguyen
David Nguyen

Reputation: 8528

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.

Upvotes: 1

Related Questions