perspective-origin
perspective は透視図法で消失点のX方向、Y方向の位置を指定します。
- 値
- X は数値 + px % 等, left, center, right
Y は数値 + px % 等, top, center, bottom - 初期値
- 50% 50%
- 対象
- 変形可能要素
- 継承
- しない
- CSS レベル
- CSS 3（CSS Transforms Level 2）
値の詳細
共通
- 数値
- 絶対的な数値または要素の長さに対する相対値。負の数も可
x-position
- left
- 0 指定と同等
- center
- 50% 指定と同等
- right
- 100％ 指定と同等
y-position
- top
- 0 指定と同等
- center
- 50% 指定と同等
- bottom
- 100% 指定と同等
サンプル
HTML
<div class="item">
<p>perspective:500;を指定して、Y軸45度回転</p>
</div>CSS
.item {
padding: 20px;
background-color: #dddddd;
position: absolute;
width: 300px;
perspective: 500px;
perspective-origin: left bottom;
}
.item > p {
margin: 0;
width: 200px;
height: 150px;
background-color: green;
transform: rotateY(45deg);
}