備忘録的プログラミングリファレンス

perspectiveプロパティ

 perspectiveプロパティは、立体的に表示できるように設定したエレメントの遠近感を指定するプロパティです。 transformプロパティと併せて定義します。
 perspectiveプロパティは、ユーザー視点からの距離を指定します。それによって遠近感が変わります。 値が小さいほど近くに、大きいほど遠くにあるように表示されます。

 perspectiveとperspective-originプロパティは親エレメントに、transformプロパティは子エレメントに設定します。

 transform-functionにperspective()関数があります。 transformプロパティでperspective()関数を利用して遠近感を指定する方法もあります。

 視点の中心位置はエレメントの中心(50%,50%,0)です。 perspectiveプロパティの値が小さいほどエレメントの中心に近づきます。0またはnoneは遠近感の指定を適応しません。 perspective-originプロパティで視点位置を指定することができます。

立体的に表示したエレメントからの視点を設定
parent_element{
	perspective: 500px;
}

child_element{
	transform: rotate3d(1,1,1,60deg);
}

構文(Syntax)

CSS

perspective: none | length | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.perspective;
値の設定
object.style.perspective="none | length | initial | inherit";

値(Values)

Value摘要
none初期値(default値)、0と同じで遠近感の効果はなし
lengthCSS長さの単位
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)none
継承(Inherited)No
CSS AnimationYes

Example

 perspectiveの例です。transformプロパティのrotate3d()関数でX軸、Y軸、Z軸を中心に60度傾けて立体的に見えるようにしたエレメントを500px向こうに見えるように指定しています。

 値を0またはnoneにすると遠近感を適応しません。