CSS3: perspective プロパティ - 3D変形の奥行きの深さ

■ 概要

項　　目説　　明
記述形式 セレクタ {perspective: 値 }
値 の形式 none | 数値　（長さ）
初 期 値 none
対応ブラウザー C3+ / e?+ / N?+ / Fx?+ / Op?+ / Ch6+ / Sa5+
適用可能な要素 変形可能な要素
継　　承 しない

■ 解説

perspectiveプロパティ は，transformプロパティ による 3D変形の奥行きの深さ を指定します。

perspectiveプロパティの値に none、または、0 を指定した場合には、transform による変形の際に奥行きが適用されません。

perspectiveプロパティ指定による変形効果は、基本的には transform: perspective(数値) を指定した場合と同じになりますが、適用対象が perspectiveプロパティを指定した要素自身ではなく、その子要素で位置や変形を指定されたものにだけになる点が異なります。

指定できる値の形式は，以下のとおりです。

値説　　明
none 変形の際の奥行きを指定しない（初期値）
数　　値 奥行きの深さを数値で指定

■ 使用例（  pause-before プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!-- 
   p.sample1, p.sample2 { background-color:limegreen; }
   p.sample1 { perspective:500; }
   p.sample1 img, p.sample2 img { transform: rotateY(70deg);}
-->
</style>
HTML
<body> ～ </body>		 
<p class="sample1">
   perspective:500;を指定して、Y軸70度回転<br>
   <img src="../logo.gif">
</p>
<p class="sample2">
   perspectiveプロパティの指定なしで、Y軸70度回転<br>
   <img src="../logo.gif">
</p>

ブラウザー 表示例

perspective:500;を指定して、Y軸70度回転
sample1

perspectiveプロパティの指定なしで、Y軸70度回転
sample2

■ 備考

【参考ページ】