perspectiveで3D変形する要素の奥行きを表す【CSS】

perspectiveプロパティは、視点の距離を指定することでz軸に変形した要素の奥行きを表すプロパティです。

transformプロパティのperspective()関数は変形した要素自体に指定しますが、このプロパティは変形する要素の親要素に指定します。

perspectiveの値の指定方法

perspectiveプロパティでは、視点の距離をpxなどの単位つき数値で指定します。

0以下の値を指定した場合は、noneを指定した場合と同じになり、noneを指定すると、当然z軸方向に変化した要素の奥行きは表されません。

次の2枚の画像のうち、1枚目はperspectiveを指定していない場合で、2枚目はperspectiveを指定した場合です。