transform-originで変形する要素の中心位置を指定【CSS】

transform-originプロパティは、変形させる要素の中心点の位置を指定するプロパティです。

{transform-origin: 位置;}

transform-originの値の指定方法

transform-originプロパティでは、中心点の位置となるx,y,z座標を半角スペースで区切って指定します。

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

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

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

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

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

%値やpxなどの単位つき数値で指定することもでき、z座標に関しては単位つき数値でのみ指定ができます。

z座標を省略した場合は、0pxが適用されます。