CSS - perspective-origin

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

概要

サポート (説明)

説明

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;
}

<h3>left top</h3>
<div class="container" style="perspective-origin:left top;">
 <div class="panel">A</div>
</div>
<h3>right bottom</h3>
<div class="container" style="perspective-origin:right bottom;">
 <div class="panel">A</div>
</div>

関連項目

リンク

• http://www.w3.org/TR/css-transforms-1/#perspective-origin-property
• https://developer.mozilla.org/ja/docs/Web/CSS/perspective-origin
• http://caniuse.com/#search=transform