CSS - perspective

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

概要

サポート (説明)

説明

transform で三次元変換を行う際の、要素の中心から視点までの距離を指定します。perspective を指定する方法は、transform プロパティの perspective() 関数で指定する方法と、本ページの perspective プロパティで指定する方法があります。前者は指定した要素自体に適用されるのに対し、後者は指定した要素の子要素に適用されます。

使用例

下記の例では、外枠(container)に対して、赤いパネル(panel)を X軸を中心に 60度回転させています。perspective に none を指定した場合、回転しただけパネルの見かけの高さは変わりますが、遠近法による奥行の表現は変化しません。200px を指定した場合は、遠近法により、遠くは小さく、手前は大きく表示されます。80px を指定した場合は、視点が近づくため、さらに遠近法による差異が大きくなります。

.container {
  width: 80px;
  height: 80px;
  border: 1px solid #999;
  margin-left: 30px;
}
.panel {
  width: 80px;
  height: 80px;
  transform: rotateX(60deg);
  background: #f33;
  text-align: center;
  font-size: 16pt;
}

<h3>none</h3>
<div class="container" style="perspective:none;">
 <div class="panel">Panel</div>
</div>
<h3>200px</h3>
<div class="container" style="perspective:200px;">
 <div class="panel">Panel</div>
</div>
<h3>80px</h3>
<div class="container" style="perspective:80px;">
 <div class="panel">Panel</div>
</div>

関連項目

リンク

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