最終更新日

perspectiveプロパティ

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

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

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

以下は、関連プロパティです。

transform
transform-origin
transform-style
perspective-origin
backface-visibility

CSS3での変更点
・perspectiveは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
none ブロックレベル要素、インラインレベル要素 なし
説明
none 遠近効果は適用されません。(初期値
数値 奥行きを示す値を、単位なしのピクセル値で指定します。数値が0以下の場合、遠近効果は適用されません。
サンプルコード
perspective: none;
perspective: 300;
参考文献:CSS Transforms外部リンク
HOME