perspective-originで3D変形要素の視点の位置を指定【CSS】

perspective-originプロパティは、奥行きを表している要素に対して、視点の位置を指定するプロパティです。

{perspective-origin: 視点の位置;}

ふつう奥行きは正面から見たときの状態で表現されますが、視点の位置を変えると、さまざまな角度から見た場合の奥行きを表現できます。

perspective-originの値の指定方法

perspective-originプロパティでは、対象要素の左上端「0 0」を起点としてx,y座標を半角スペースで区切って指定します。

1つだけ指定した場合、2つ目の値はcenterが適用されます。

leftを指定すると、視点の位置のx座標は0%、つまり左端になります。

rightを指定すると、視点の位置のx座標は100%、つまり右端になります。

topを指定すると、視点の位置のy座標は0%、つまり上端になります。

bottomを指定すると、視点の位置のy座標は100%、つまり下端になります。

centerを指定すると、視点の位置のx,y座標は50%で中央になります。

視点の位置を%値やpxなどの単位つき数値で指定することもできます。