如果父元素旋转，如何旋转子元素？答案

【问题标题】：how do you unrotate a child element if its parent element is rotated?如果父元素旋转，如何旋转子元素？
【发布时间】：2013-03-29 21:38:00
【问题描述】：

目标是让子元素由其父元素旋转，但是一旦您单击子元素，它就会动画化到如果没有对父元素应用旋转时的样子。所以基本上我只是想从父元素中移除旋转。

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

【问题讨论】：

【解决方案1】：

为了理解，旋转 div 的孩子正在从他们的父母点进行转换，所以从 rotateX(50) 孩子正在从“0”做一个 rotateX(-50)，但它不是“0” persay，它不会给你你所期望的。

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

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

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

【讨论】：

这确实使子元素不旋转，但现在它根本不被父元素旋转。我试图让它由父级旋转，但是当你单击子级时，它会旋转回如果没有对父级进行旋转时的位置。我修改了你的小提琴来说明。孩子应该和父母一起搬家。 jsfiddle.net/arGWr/2
请忽略我最后的评论。这就是我的意思——外部元素是包装器。我试图弄清楚如何旋转外部元素并让子元素随之旋转，但是当您单击其中一个子元素时，它会动画到它所在的位置，如果没有对父元素进行旋转。
所以你不知道点击事件怎么做？
我当然知道怎么做点击事件。子元素必须与父元素一起旋转。那么如果父元素没有旋转（但父元素应该旋转），则子元素必须对其进行动画处理。它们在原始示例中的包装器中（.outer，.inner）
你不能“一起”做它们，你必须按照我给你展示的格式单独旋转，否则它们会被扭曲，你将无法“还原”。

【解决方案2】：

您可以尝试将其添加到父级

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

【讨论】：