css - 如果父元素旋转了，如何取消旋转子元素？

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”做一个 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