perspective()

CSS の perspective() 関数は、ユーザーと z=0 平面との間の距離を定義し、閲覧者からの視点は二次元のインターフェイスが三次元であったかのようになります。結果は <transform-function> データ型になります。

perspective() 変形関数は、変形される要素に適用される transform 値の一部です。これは perspective および perspective-origin の各プロパティが三次元空間に変形される子の親に付けられるのとは異なります。

構文

perspective() を使用してしている視点距離は <length> 値で指定し、ユーザーと z=0 平面との間の距離を表します。 z=0 平面は二次元で表示されるすべてのものが表示される平面であり、または画面の平面です。正の数を指定すると、要素はインターフェイスの他のものよりもユーザーの近くに表示され、負の数を指定すると、遠くに表示されます。値がより大きくなるほど、ユーザーの視点は遠ざかります。

perspective(d)

値

d: <length> で、ユーザーと z=0 平面との間の距離を表します。 0 または負の数であった場合は、距離の変換は適用されません。

ℝ² のデカルト座標	ℝℙ² の同次座標	ℝ³ のデカルト座標	ℝℙ³ の同次座標
この変換は三次元空間に適用され、平面で表現することはできません。		この変換は ℝ³ では線形変換ではないので、デカルト座標行列を使用して表現することはできません。	$(\begin{matrix} 1 & 0 & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & - 1 / d & 1 \end{matrix})$

例

HTML

<p>Without perspective:</p>
<div class="no-perspective-box">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (9cm):</p>
<div class="perspective-box-far">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

<p>With perspective (4cm):</p>
<div class="perspective-box-closer">
  <div class="face front">A</div>
  <div class="face top">B</div>
  <div class="face left">C</div>
</div>

CSS

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 100px;
  text-align: center;
}

p + div {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  margin-left: 100px;
}
.no-perspective-box {
  transform: rotateX(-15deg) rotateY(30deg);
}

.perspective-box-far {
  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
}

.perspective-box-closer {
  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
}

.top {
  background-color: skyblue;
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}

.left {
  background-color: pink;
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.front {
  background-color: limegreen;
  transform: translate3d(0, 0, 50px);
}

結果

仕様書

仕様書	状態	備考
CSS Transforms Level 2 perspective() の定義	編集者草案	初回定義

ブラウザーの互換性

<transform-function> データ型の互換性情報をご覧ください。