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

CSS 3D 変換: パースペクティブ インタラクション

CSS で 3D 変換を適用する場合、実行順序が重要な役割を果たします。これは、perspective() 関数を使用する場合に特に関係します。

問題の説明

ユーザーは、transform プロパティが、perspective() 関数を使用するかどうかに応じて異なる効果を示すことに気づきました。関数はプロパティ値の先頭または末尾で宣言されます。この動作は Chrome ブラウザと Firefox ブラウザの両方で確認されています。

根本原因

CSS 仕様によれば、変換行列は左から変換関数を適用して計算されます。右へ。パースペクティブ() 関数が最後に配置されると、変換などの他のすべての変換の後に適用されます。この結果、遠近感を考慮せずに変換が実行されます。

解決策

正確な 3D 変換を保証するには、変換プロパティの始まりvalue.

例:

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

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

この例では、最初のボックスは遠近効果が適用された状態で 3D 空間に変換されますが、2 番目のボックスは変換されません。遠近法を適用します。

追加考慮事項:

• 変換中の要素内でパースペクティブ プロパティを使用することはお勧めできません。これにより、予期しない結果が生じる可能性があります。
• 変換関数の順序は重要であり、結果に影響を与える可能性があります。さまざまなシーケンスの影響を実験して調査することが重要です。

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