perspective-origin プロパティ
perspective-origin プロパティは、立体的に表示できるように設定したエレメントの視点を指定するプロパティです。値によって視点が変わります。
transformとperspectiveプロパティを併せて定義します。
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);
}
ページ内 Index
構文(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-axis | left、center、right、top、bottomの設定値とCSS長さの単位 |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | 50% 50% |
継承(Inherited) | No |
CSS Animation | Yes |
Example
perspective-originの例です。transformとperspectiveプロパティの定義が必要です。