【CSS Modules】perspective()関数の使い方
perspective()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
perspective()関数は、CSSのtransformプロパティ内で要素に3Dの遠近感を適用するために使用する関数です。この関数は、視点からZ=0平面（要素が配置されている平面）までの距離を設定することで、要素が奥行きを持っているかのように見せる効果を提供します。
引数には、距離を表すCSSの<length>型（例: px, em, rem）の値を一つ指定します。この値が短いほど、視点が要素に近く、より強い遠近感が表現されます。逆に、値が長いほど、視点が要素から遠く、遠近感が弱まり、ほとんど平行投影に近い見え方になります。
perspective()関数が適用されるのは、その関数が指定された要素自体ではなく、その子要素の3D変形に対してです。例えば、親要素にperspective()を設定することで、その子要素がrotateX(), rotateY(), translateZ()などの3D変形を行った際に、奥行きのある見た目になります。もしこの関数が設定されていない場合、子要素は平面的な2Dの変形として表示されます。
通常は正の距離を指定し、0や負の値を指定した場合は遠近感の効果が得られません。transformプロパティに複数の変形関数を記述する際には、perspective()関数は他の3D変形関数の前に記述することが推奨されます。
公式リファレンス: perspective()
構文(syntax)
1transform: perspective(1000px);
引数(parameters)
<length>
- <length>: 透視変換の原点からの距離を指定する長さ。正の値は視点からの距離が遠いほど、負の値は近いほど要素を遠くに配置します。
戻り値(return)
<transform-function>
perspective()関数は、要素に3次元の奥行き効果を与えるためのCSSのtransform関数です。この関数は、指定された透視変換（perspective transform）を表す<transform-function>を返します。