| 属性名 | perspective-origin |
|---|---|
| 値 |
[ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] ] && [ center | [ top | bottom ] ] |
| 初期値 | 50% 50% |
| 適用可能要素 | トランスフォーム可能な要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | トランスフォームとして可能 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari | |
|---|---|---|---|---|---|---|
| 3D | CSS3 | 10(制限有) | 10(-moz) 16 | 12(-webkit) 36 | 15(-webkit) 23 | 4(-webkit) 9 |
transform で要素を変換し、perspective で視点を移動する場合の視点の原点指定します。X軸方向には left, center, right, <percentage>, <length> のいずれかを指定します。Y軸方向には top, center, bottom, <percentage>, <length> のいずれかを指定します。値が 1つしか無い場合、2番目の値は center とみなされます。基本的には X軸、Y軸の順番で指定しますが、bottom right など明確な場合は、X軸と Y軸の順番は入れ替えることができます。初期値は 50% 50% で、要素の中央を原点とします。
最初の例は視点の原点が親要素(container)の左上にあり、子要素(panel)左上から見下ろすことになります。次の例では視点の原点は親要素(container)の右下にあり、子要素(panel)を右下から見上げることになります。
.container {
width: 80px;
height: 80px;
border: 1px solid #999;
margin-left: 30px;
transform-style: preserve-3d;
perspective: 120px;
background: rgba(200, 200, 255, 0.7);
}
.panel {
width: 80px;
height: 80px;
transform: rotateX(90deg);
background: #f33;
text-align: center;
font-size: 50pt;
}
<h5>left top</h5> <div class="container" style="perspective-origin:left top;"> <div class="panel">A</div> </div> <h5>right bottom</h5> <div class="container" style="perspective-origin:right bottom;"> <div class="panel">A</div> </div>