CSSリファレンス

perspective-originの意味と使い方

子要素の透視図法のx軸とy軸の方向は、perspectiveプロパティが指定された要素のボックスの中心(50%, 50%)が基点となりますが、perspective-originプロパティを指定すれば、この位置を変更することができます。ボックスの左上を「0, 0」とした時の基点の位置を、x軸方向とy軸方向の座標またはキーワードで半角スペースで区切って指定します。値を1つだけ指定した場合は、2つ目の値に「center」を指定したものとみなされます。

値の指定方法

パーセント値+%

要素のボックスのサイズに対する割合で、x軸とy軸方向の基点の位置を指定します。


実数値+単位

数値に単位を付けて、x軸とy軸方向の基点の位置を指定します。


left、center、right、top、bottom

x軸方向の位置(left、center、right)とy軸方向の位置(top、center、bottom)を指定します。topとleftは「0%」、rightとbottomは「100%」、centerは「50%」を指定したときと同じになります。


関連プロパティ

  • transform-style:3次元上での子要素の描画方法を指定する
  • perspective:子要素を透視図法で表示する