css - 親要素が回転している場合、子要素の回転を解除するにはどうすればよいですか?

Question

目標は、子要素を親要素によって回転させることですが、子要素をクリックすると、親要素に回転が適用されていない場合のようにアニメーション化されます。したがって、基本的には、親要素からの回転をオフにしようとしています。

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

ここに画像の説明を入力

score 1 · Accepted Answer

理解するために、回転されたdivの子は親ポイントから変換を行っているため、rotateX(50)から、子は「0」からrotateX(-50)を実行していますが、「0」ではありません。あなたが期待しているものをあなたに与えません。

「親」が実際に子に影響を与えないように、すべてをラップして個別に処理する必要があります。その後、適切に反転できます。

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

編集：よりよく説明するために、元のソリューションでは、正方形があります。それを回転させると、長方形に変わります - 長方形でそれを行い、回転で複合します。以前の変換を元に戻そうとしていることはわかりません。

score 0 · Accepted Answer

これを親に追加してみてください

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

2 に答える 2