perspective
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年9月.
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;
値
解説
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 |
ブラウザーの互換性
Loading…