css - 如何从子元素中删除父元素的旋转？

Question

我有一个旋转子元素的父元素。当我单击一个按钮时，我希望子元素动画到它所在的位置，如果没有对父元素应用旋转但父元素应该保持旋转。

如果您只是减去父级对子级的旋转，则它仅适用于 rotateZ

.parent { -webkit-transform:rotateX(45deg); }
.child { -webkit-transform:rotateX(-45deg); }

小提琴

Answer 1

将孩子旋转 180 度减去父母的旋转对我有用：http: //jsfiddle.net/e9raN/

#parent {
    -webkit-transform: rotateX(30deg) rotateY(30deg);
}

#child {
    -webkit-transform: rotateX(150deg) rotateY(150deg);
}

我不知道为什么否定不起作用，但这似乎是唯一的解决方案。