perspective
perspective は透視図法で要素を描画する際に、奥行き0の面から消失点までの距離を指定します。
- 値
- none, 数値
- 初期値
- none
- 対象
- 変形可能要素
- 継承
- しない
- CSS レベル
- CSS 3（CSS Transforms Level 2）
値の詳細
- none
- 立体的な変形を適用しない
- 数値
- 奥行きを示す数値 + px, rem, cm 等。値が小さいほど視点が近くなります。
サンプル
HTML
<div class="item">
<p>perspective:500;を指定して、Y軸45度回転</p>
</div>CSS
.item {
padding: 20px;
background-color: #dddddd;
position: absolute;
width: 300px;
perspective: 500px;
}
.item > p {
margin: 0;
width: 200px;
height: 150px;
background-color: green;
transform: rotateY(45deg);
}