CSS - perspective-origin

トップ > CSSリファレンス > perspective-origin

概要

属性名 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
アニメーショントランスフォームとして可能

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
3DCSS310(制限有)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)を右下から見上げることになります。

CSS
.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;
}
HTML
<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>
表示
left top
A
right bottom
A

関連項目

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

リンク


Copyright (C) 2015 杜甫々
初版:2015年12月27日、最終更新:2015年12月27日
http://www.tohoho-web.com/css/prop/perspective-origin.htm