最終更新日

perspective-originプロパティ

perspective-originは、perspectiveでの遠近投影の基点となる位置を指定するプロパティです。初期値では、要素ボックスの中心が設定されています。指定する値は1~2個で、半角スペースで区切って並べます。

・1個目の値は、X軸(水平)方向。長さの値、パーセント値、キーワードを指定できます。
・2個目の値は、Y軸(垂直)方向。長さの値、パーセント値、キーワードを指定できます。

以下は、関連プロパティです。

transform
transform-origin
transform-style
perspective
backface-visibility

CSS3での変更点
・perspective-originは、CSS3から新しく追加されたプロパティです。
初期値 適用先 継承
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;
参考文献:CSS Transforms外部リンク
HOME