【CSS Modules】perspectiveプロパティの使い方

perspectiveプロパティは、CSSの3D変換において、要素に遠近感を与えるための視点の距離を保持するプロパティです。このプロパティは、親要素に設定することで、その子要素に適用される3D変換（transform）の見え方を制御します。具体的には、閲覧者の視点から画面までの仮想的な距離を設定し、子要素がこの視点からどのように見えるかを決定します。

例えば、要素が3D空間で回転したり移動したりする際に、手前にあるものは大きく、奥にあるものは小さく見えるといった、現実世界に近い奥行きのある視覚効果を生み出します。値はpxなどの単位を持つ距離で指定します。値が小さいほど、視点が要素に近く、奥行きが強調された劇的な遠近感の効果が得られます。逆に値が大きいほど、視点が遠くなり、奥行きは控えめに見えます。このプロパティ自体は、それ単独では要素の見た目を変更しませんが、transformプロパティと組み合わせて使用することで、Webページ上にリアルな3D空間やアニメーションを表現する上で非常に重要な役割を果たします。

Copy
1.parent-element {
2  perspective: 1000px;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません