perspective()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.

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

試してみましょう

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

構文

perspective() で使用する視点距離は、<length> 値でユーザーと z=0 平面との間の距離を指定するか、または none で指定します。 z=0 平面とは、二次元表示ですべてが見える平面、つまり画面のことです。 負の値は構文エラーになります。 1px より小さい値 (ゼロを含む) は 1px になります。 値が none 以外の場合、 z が正の位置にある要素は大きく表示されます。また、z が負の位置にある要素は小さく表示されます。 z 位置が perspective の値と同じか大きい要素は、ユーザーの背後にあるかのようになり、非表示になります。 perspective() が大きいと、座標変換が小さいことを表します。perspective() の値が小さいと、座標変換が大きいことを表します。perspective(none) は無限の距離からの遠近感を表し、座標変換はありません。

css
perspective(d)

値

d

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

直交座標系 (ℝ^2) 同次座標系 (ℝℙ^2) 直交座標系 (ℝ^3) 同次座標系 (ℝℙ^3)

この変換は 3D 空間に適用され、平面で表現することはできません。

この変換は ℝ^3 では線形変換ではないので、直交座標行列を使用して表現することはできません。 (1 0 0 0 0 1 0 0 0 0 1 0 0 0 − 1 / d 1)

例

HTML

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

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

結果

仕様書

Specification
CSS Transforms Module Level 2
# funcdef-perspective

ブラウザーの互換性

BCD tables only load in the browser

関連情報