子要素を回転させる親要素があります。ボタンをクリックすると、子要素が親に回転が適用されていない場合の位置にアニメーション化されますが、親は回転したままになります。
子の親の回転を差し引くだけでは、rotateZ でのみ機能します
.parent { -webkit-transform:rotateX(45deg); }
.child { -webkit-transform:rotateX(-45deg); }
子要素を回転させる親要素があります。ボタンをクリックすると、子要素が親に回転が適用されていない場合の位置にアニメーション化されますが、親は回転したままになります。
子の親の回転を差し引くだけでは、rotateZ でのみ機能します
.parent { -webkit-transform:rotateX(45deg); }
.child { -webkit-transform:rotateX(-45deg); }
親の回転を引いて180度子を回転させるとうまくいきました: http://jsfiddle.net/e9raN/
#parent {
-webkit-transform: rotateX(30deg) rotateY(30deg);
}
#child {
-webkit-transform: rotateX(150deg) rotateY(150deg);
}
なぜネガティブが機能しないのかはわかりませんが、これが唯一の解決策のようです。