最終更新日
perspective-originは、perspectiveでの遠近投影の基点となる位置を指定するプロパティです。初期値では、要素ボックスの中心が設定されています。指定する値は1~2個で、半角スペースで区切って並べます。
・1個目の値は、X軸(水平)方向。長さの値、パーセント値、キーワードを指定できます。
・2個目の値は、Y軸(垂直)方向。長さの値、パーセント値、キーワードを指定できます。
以下は、関連プロパティです。
・transform
・transform-origin
・transform-style
・perspective
・backface-visibility
初期値 | 適用先 | 継承 |
---|---|---|
50% 50% | ブロックレベル要素、インラインレベル要素 | なし |
値 | 説明 |
---|---|
長さの値 | 要素ボックスの左上隅からの距離を、数値に「px」「em」などの単位をつけて指定します。「0」を指定する場合は、単位は必要ありません。負の値も指定可能です。 |
パーセント値 | 要素ボックスの左上隅からの距離を、要素ボックスの幅または高さに対する割合で指定します。負の値も指定可能です。 |
left | 要素ボックスの左端を示します。 |
center | 要素ボックスの幅の中心または高さの中心を示します。 |
right | 要素ボックスの右端を示します。 |
top | 要素ボックスの上端を示します。 |
bottom | 要素ボックスの下端を示します。 |
perspective-origin: left; perspective-origin: left top; perspective-origin: left 30%; perspective-origin: right bottom; perspective-origin: center top; perspective-origin: 20% 10%; perspective-origin: 50px 30px;