CSS - perspective

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

概要

属性名 perspective
none | <length>
初期値none
適用可能要素トランスフォーム可能な要素
継承継承しない
メディアvisual
アニメーション可能

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
3DCSS31010(-moz)
16
12(-webkit)
36
15(-webkit)
23
4(-webkit)
9

説明

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

説明
none遠近法による変形を適用しません。
<length>要素の中心から視点までの距離を指定します。

使用例

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

CSS
.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;
}
HTML
<h5>none</h5>
<div class="container" style="perspective:none;">
 <div class="panel">Panel</div>
</div>
<h5>200px</h5>
<div class="container" style="perspective:200px;">
 <div class="panel">Panel</div>
</div>
<h5>80px</h5>
<div class="container" style="perspective:80px;">
 <div class="panel">Panel</div>
</div>
表示
none
Panel
200px
Panel
80px
Panel

関連項目

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.htm