CSS 3D 変換における「視点」の順序が重要なのはなぜですか?

最後に遠近法を使用した CSS 3D 変換: 理由を理解する

CSS 3D 変換により、Web 要素で複雑なアニメーションと遠近法効果が可能になります。しかし、パースペクティブ プロパティが変換リストの最後に配置されると、興味深い観察結果が現れました。

問題:

提供されたスニペットでは、2 つのボックスに異なるホバーが設定されています。行動。パースペクティブ プロパティは、最初のボックスの変換リストの最後に配置されますが、2 番目のボックスの変換の前に配置されます。

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

これにより、両方の変換が一見同一であるにもかかわらず、異なる視覚的な結果が生じます。

答え:

この動作を理解する鍵は、変換行列が計算されます。 CSS Transform 仕様によれば、行列は次のように計算されます:

1. 恒等行列から開始します。
2. transform-origin の計算された X と Y によって変換します。
3. transform プロパティの各変換関数を左から右に乗算します。
4. 否定された値で変換します。変換元の計算された X 値と Y 値。

説明:

ステップ 3 では、左から左への変換を適用することが重要です。そうです。これは、パースペクティブがリストの最後に配置されると、パースペクティブが適用される前に変換が実行されることを意味します。

その結果、変換はパースペクティブ効果がない状態で行われ、その結果、動きは平坦で奥行きがないように見えます。

意味:

• 常に他の変換の前に適用されるように、変換リストの先頭にパースペクティブ プロパティを追加します。
• 効果がないため、変換する要素内でパースペクティブ プロパティを適用することは避けてください。

これらのガイドラインに従うことで、パースペクティブ プロパティを正しく適用して、目的の 3D 変換効果を実現できます。

以上がCSS 3D 変換における「視点」の順序が重要なのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。