如果子元素被旋转，你如何取消旋转子元素？

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

fiddle

Answer 1

要理解，旋转的div的子节点正在从父节点进行转换，所以从rotateX（50）开始，子节点从“0”开始执行rotateX（-50），但它不是“0”嗯，这不会给你你所期待的。

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

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

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

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

Answer 2

您可以尝试将其添加到父

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

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