如果子元素的父元素已旋转，则如何取消旋转呢？

Question

目标是让子元素由其父元素旋转，但是一旦单击该子元素，它就会动画显示如果没有将旋转应用于父元素的情况。所以基本上我只是想把父元素的旋转移除。

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

小提琴

Answer 1

要理解，旋转的 div 的子级正在从其父级点进行转换，因此从rotateX（50）开始，子级正在从“0”进行旋转X（-50），但它不是“0”本身，这不会给你你所期待的。

您需要做的是将所有内容包装起来并单独处理它们，以便“父母”实际上不会影响孩子。然后就可以正确反转了。

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

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

编辑：为了更好地解释，在原始解决方案中，你有一个正方形。它变成了一个矩形，现在当你对其进行旋转时 - 它在矩形上进行旋转，在旋转上进行复合。它不知道您正在尝试逆转之前的转换。