css - CSS3パースペクティブプロパティとは一体何ですか？

Question

オンラインで検索していくつかの資料を見つけましたが、少なくとも私にとっては、この概念を明確に示したものはありませんでした。たとえば、w3schoolsは、ビューから3D要素を配置するピクセル数を定義すると述べています。完全に理解するのはとても抽象的です。誰かがもっと鮮やかでわかりやすい方法で教えてもらえますか？このコンセプトを示す画像があれば、これ以上のことはありません。

Answer 1

3D変換では、遠近法はオブジェクトに3Dの視点を与え、特定の視聴者の視点から3Dオブジェクトの遠近法をレンダリングしようとします。理解するのは簡単ではありません。

これがSafariのリファレンスです。

それに関する最初のチュートリアル。

遠近法の使用例。

さらにいくつかの例。

参考までに、将来的には、w3schoolsからのすべてのGoogle検索ヒットを無視することをお勧めします。彼らはどういうわけか信じられないほど浅いコンテンツで高いグーグル検索ランキングを採用することに成功しました。

Answer 2

3D空間で作業する場合は、遠近法の値を設定する必要があります。そうしないと、アニメーション化された要素がフラットに見えます。どのように？パースペクティブCSSプロパティは、Zインデックスとユーザーの間の距離に影響を与えることにより、要素に3D空間を提供します。注意：パースペクティブプロパティは、アニメーション化される要素に適用しないでください（CSSトランジション、トランスフォーメーション、またはアニメーションを介して）。しかし、親要素に。