목표는 부모 요소에 의해 자식 요소가 회전되도록하는 것이지만 일단 자식 요소를 클릭하면 부모 요소에 회전 요소가 적용되지 않은 경우 어떻게 될지 애니메이션됩니다. 따라서 기본적으로 부모 요소의 회전을 해제하려고합니다.부모 요소가 회전 된 경우 자식 요소를 어떻게 회전하지 않습니까?
WIN - rotateZ(ndeg) on the parent and rotateZ(-ndeg) on the child
FAIL - rotateXY(ndeg) on the parent and rotateXY(-ndeg) on the child
은 부모가 지점에서 회전 된 div의 아이가 rotateX을 (하고 rotateX (50)에서 아이가되도록, 그들의 변화를하고있다, 이해하기 - 50)을 "0"에서 "0"으로하지 않으므로 기대하는 바를 얻을 수 없습니다.
"부모"가 실제로 자녀에게 영향을주지 않도록 모든 것을 마무리하고 따로 처리해야합니다. 그런 다음이를 올바르게 되돌릴 수 있습니다.
<div class="wrapper">
<div class="outerX"></div>
<div class="inner1X"></div>
<div class="inner2X"></div>
</div>
편집 : 더 나은 설명하기 위해, 원래의 솔루션, 당신은 사각형이있다. 그것은 직사각형으로 바뀝니다. 회전 할 때 직사각형으로 바뀌고 회전하면됩니다. 이전 변환을 되돌리려한다는 것을 알지 못합니다.
당신이 부모에게이 추가 시도 할 수
-webkit-transform-style: preserve-3d;
참조 : http://www.webkit.org/blog-files/3d-transforms/transform-style.html
이 회전되지 않은 자식 요소를 얻을하지 않습니다하지만 지금은 모든 부모 요소에 의해 회전되지 않습니다. 부모에 의해 회전하도록 만들려는 메신저하지만 그 다음에 자식을 클릭하면 부모에게 회전이없는 경우 다시 위치로 돌아갑니다. 설명하기 위해 바이올린을 수정했습니다. 아이는 부모와 함께 움직여야합니다. http://jsfiddle.net/arGWr/2/ – user1873073
마지막 코멘트를 무시하십시오. 이것은 내가 말하고자했던 것입니다. 외부 요소는 래퍼입니다. 메신저 외부 요소를 회전하는 방법을 알아 내려고 그것과 함께 회전 된 자식 요소를 가지고 있지만 그 다음 당신이 자식 요소 중 하나를 클릭하면 그것은 부모 요소에 회전이 없다면있을 위치로 움직입니다. – user1873073
클릭 이벤트를 수행하는 방법을 모르십니까? –