如何旋转子元素，如果其父元素被旋转？

目标是让子元素通过其父元素进行旋转，但是一旦您单击了子元素，它就会动起来，如果没有应用于父元素的旋转将会如何。所以基本上我只是试图从父元素的旋转关闭。如何旋转子元素，如果其父元素被旋转？

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

来源

2013-03-06 user1873073

要理解，旋转的div的孩子正在他们的转型，从他们的父母点，所以从rotateX（50）孩子做一个rotateX（ - 50）从“0”，但它不是“0”persay，这不会给你你所期望的。

你需要做的是将所有东西都包裹起来，并分开处理，以便“父母”实际上不影响孩子。然后你可以正确地反转它。

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

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

编辑：更好地解释，在原有的解决方案，你有一个正方形。它变成了一个矩形，现在当你做一个旋转的时候 - 它是在矩形上做的，在旋转上混合。它不知道你正试图扭转以前的转型。

来源

2013-03-06 05:16:01

这确实让不旋转的子元素，但现在它不会被父元素的所有旋转。即时通讯尝试让它由父母旋转，但当你点击孩子时，它会旋转回到父母没有旋转的位置。我修改你的小提琴来说明。孩子应该和父母一起搬家。 http://jsfiddle.net/arGWr/2/ – user1873073 2013-03-06 14:22:21

请忽略我最后的评论。这就是我的意思 - 外部元素是包装。即时通讯试图弄清楚如何旋转外部元素，并让子元素与它一起旋转，但是当你点击其中一个子元素时，它将动画到如果没有对父元素执行旋转操作的位置。 – user1873073 2013-03-06 14:29:03

所以你不知道如何做点击事件？ – 2013-03-06 19:46:18

你可以尝试添加该父

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

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

来源

2013-03-29 13:38:00 Max

如何旋转子元素，如果其父元素被旋转？

回答

相关问题