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

perspective-originプロパティ

 perspective-originプロパティは、立体的に表示できるように設定したエレメントの視点を指定するプロパティです。値によって視点が変わります。
 transformperspectiveプロパティを併せて定義します。

 perspective-originプロパティはエレメントの幅と高さの割合で指定します。もしくはleft(左から0%)、right(左から100%)、top(上から0%)、bottom(上から100%)、center(左から50%、上から50%)で指定します。

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

立体的に表示したエレメントからの視点を設定し、視点の位置を指定
parent_element{
	perspective: 500px;
	perspective-origin: 100% 20%;
}

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

構文(Syntax)

CSS

perspective-origin: [ x-axis y-axis ] | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.perspectiveOrigin;
値の設定
object.style.perspectiveOrigin="[ x-axis y-axis ] | initial | inherit";

値(Values)

Value摘要
50% 50%初期値(default値)
x-axis y-axisleft、center、right、top、bottomの設定値とCSS長さの単位
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

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

Example

 perspective-originの例です。transformperspectiveプロパティの定義が必要です。