最終更新日 2021年6月20日

perspectiveプロパティ

perspectiveは、子要素に対して遠近効果を指定するプロパティです。

transformのperspective変形関数と同じく遠近効果を適用します。ただし、適用の対象はperspective変形関数と異なり、要素自身ではなく子要素のみとなります。

使い方はperspective変形関数と同じで、奥行きを示す値を、単位なしのピクセル値で指定します。値がnoneの場合や、数値が0以下の場合、遠近効果は適用されません。

CSS3での変更点

・perspectiveは、CSS3から新しく追加されたプロパティです。

初期値	適用先	継承
none	ブロックレベル要素、インラインレベル要素	なし

値	説明
none	遠近効果は適用されません。（初期値）
数値	奥行きを示す値を、単位なしのピクセル値で指定します。数値が0以下の場合、遠近効果は適用されません。

サンプルコード

perspective: none;
perspective: 300;

参考文献：CSS Transforms

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。