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 の平面とユーザーとの間の距離を定めて 3D に配置された要素に遠近感を与えます。

試してみましょう

perspective: none;

perspective: 800px;

perspective: 23rem;

perspective: 5.5cm;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgba(90, 90, 90, 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 210, 0, 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(210, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 210, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(210, 210, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(210, 0, 210, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

構文

css

/* キーワード値 */
perspective: none;

/* <length> 値 */
perspective: 20px;
perspective: 3.5em;

/* グローバル値 */
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
perspective: unset;

値

none: 立体的な座標変換を一切適用しないことを示すキーワードです。
<length>: ユーザーと z=0 平面間の距離を表す <length> です。立体的な座標変換を要素とその内容に適用するときに使います。 0 や負の値ならば、立体的な座標変換は適用されません。

解説

z>0 である 3D 要素はより大きく、 z<0 である 3D 要素はより小さくなります。効果の強度はこのプロパティの値から決められます。

ユーザーの背後にある 3D 要素の部品、つまり z 軸座標が CSS の perspective プロパティの値より大きい要素は描画されません。

消点は既定で要素の中心に置かれますが、この位置は perspective-origin プロパティで変更できます。

このプロパティを 0 と none 以外の値で使用すると、新たな重ね合わせコンテキストを生成します。また、その場合、オブジェクトはそれを含む position: fixed の要素の包含ブロックとして動作します。

公式定義

初期値	`none`
適用対象	座標変換可能要素
継承	なし
計算値	絶対的な長さまたは `none`
アニメーションの種類	length
重ね合わせコンテキストの生成	あり

形式文法

perspective = 
  none            |
  <length [0,∞]>

例

視点の設定

視点を様々な位置に設定した場合に立体がどのように変化するかを示す例は、 CSS 座標変換の使用 > 視点の設定にあります。

仕様書

Specification
CSS Transforms Module Level 2 # perspective-property