このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

perspective()”関数CSS3で追加

記事Aug.4th,2021
要素からの視点の距離を変更するためのCSSの関数、“perspective()”について
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

perspective()”関数

perspective()”関数は要素からの視点の距離を変更するための関数です。

<transform-function>”値として使用することができ、transform”プロパティで要素の遠近感を変更することができます。

引数は1個の“0”以上の<length>”値で、xy-平面(Z座標が“0”である面)との視点の距離を表します。

perspective(〚視点からの距離〛)

引数となる距離が小さければ小さいほどZ座標が“0”よりも大きい面は拡大され、Z座標が“0”よりも小さい面は縮小されて描画されます。

1px”よりも小さい引数は“1px”として扱われます。ただし、引数が“0”の時は要素は変形されません。

変形マトリクス

以下は“perspective(d)”を表す変形マトリクスの成分です。

m11 m21 m31 m41
m12 m22 m32 m42
m13 m23 m33 m43
m14 m24 m34 m44
1 0 0 0
0 1 0 0
0 0 1 0
0 0 calc(-1 / d) 1

使用例

.transform-1 { transform: perspective(0);}
.transform-2 { transform: perspective(250px);}
.transform-3 { transform: perspective(500px);}
.transform-4 { transform: perspective(1000px);}
perspective(0)
perspective(250px)
perspective(500px)
perspective(1000px)

仕様書

定義されている仕様書
Level 1 Level 2
勧告候補(CR) 作業草稿(WD)
perspective()
定義なし

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク