【CSS Modules】perspective-originプロパティの使い方
perspective-originプロパティの使い方について、初心者にもわかりやすく解説します。
基本的な使い方
perspective-originプロパティは、CSSの3D変換において、遠近法の視点の基準位置を定義するプロパティです。このプロパティは、要素にperspectiveプロパティが適用され、さらにtransformプロパティで3D変換が指定されている場合に、その要素がどの位置から見られているか、その仮想的なカメラの位置を設定する役割を持ちます。
具体的には、3D空間における奥行きや遠近感の計算の基準となる視点の中心を調整します。これにより、要素の3D表示がどの方向から見られているように見えるかを制御し、遠近感のある表現をより詳細にデザインすることが可能です。
値は水平方向と垂直方向の2つの値を組み合わせて指定します。水平方向にはleft、center、rightといったキーワード、またはpx、emなどの単位付きの長さ、%（パーセンテージ）で指定できます。垂直方向も同様にtop、center、bottomといったキーワード、または長さやパーセンテージで指定可能です。例えば、perspective-origin: 25% 75%;と指定すると、要素の左から25%、上から75%の位置が遠近法の視点となります。
デフォルト値は50% 50%、またはcenter centerであり、これは要素の中心が遠近法の視点になることを意味します。このプロパティを調整することで、3D変換された要素が、例えば左上から見下ろされているように見えたり、右下から見上げられているように見えたりといった、ダイナミックな視覚効果を生み出すことができます。インタラクティブなウェブアプリケーションやUI要素に奥行きのある表現をもたらす際に活用されます。
構文(syntax)
1selector { 2 perspective-origin: 50% 50%; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません