CSS 3D 変換で「perspective()」の順序が重要なのはなぜですか?

CSS 3D 変換の特徴: 視点の順序付け

CSS 3D 変換は、3 次元で要素を操作するための堅牢なオプションを提供します。ただし、1 つの特有の癖が観察されています。transform プロパティ内のperspective() 関数の順序が、結果の変換に影響します。

順序は重要です

次のコードを考えてみましょう。スニペット:

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

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

ここでは、要素は画面の内外に移動することを目的としています。ただし、この効果は最初のボックスでのみ表示され、2 番目のボックスは影響を受けません。この奇妙な動作は、perspective() 関数の順序が重要であるために発生します。

Transform Computation

CSS 仕様によれば、変換行列は、transform プロパティから計算されます。次の順序で:

1. で指定された翻訳を適用しますtransform-origin
2. 各変換関数を左から右に乗算します
3. transform-origin で指定された逆変換

これは、perspective() 関数が次のことを意味します。効果を正しく考慮するには、最初 (つまり、一番左) に適用する必要があります。

は避けてください。変換された要素内の遠近法

さらに、要素自体内で遠近法プロパティを使用しないようにすることが重要です。これは論理的であるように思えるかもしれませんが、不必要であり、予期しない結果を招く可能性があります。

したがって、目的の 3D 変換を実現するには、常に、transform プロパティの最初に Perspective() 関数がリストされていることを確認してください。

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