“perspective()”関数

“perspective()”関数

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

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

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

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


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

“1px”よりも小さい引数は描画や補間に使用する際には“1px”として扱われます。

引数が“none”の時は要素は変形されません。

変形マトリクス

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

“none”は“∞”として扱われます。

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(100px);}
.transform-2 { transform: perspective(250px);}
.transform-3 { transform: perspective(500px);}
.transform-4 { transform: perspective(1000px);}


perspective(100px)

前

後

右

左

上

下

perspective(250px)

前

後

右

左

上

下

perspective(500px)

前

後

右

左

上

下

perspective(1000px)

前

後

右

左

上

下

.transform-5 { transform: perspective(none);}


perspective(none)

前

後

右

左

上

下

仕様書

定義されている仕様書

perspective()