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

perspective-originプロパティ

 perspective-originプロパティは、立体的に表示できるように設定したエレメントの視点を指定するプロパティです。値によって視点が変わります。
 エレメントの幅と高さの割合で指定します。もしくはleft(左から0%)、right(左から100%)、top(上から0%)、bottom(上から100%)、center(左から50%、上から50%)で指定します。

 perspectiveプロパティと組み合わせて使用​​します。

エレメントの左から300%、上から50%に視点を設定
perspective-origin: 300% 200%;

構文(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