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 に配置された要素に遠近感を与えます。

試してみましょう

構文

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報