transform-originの意味と使い方

2次元変形効果は、ボックスの中心(50%, 50%)を基点として適用されますが、transform-originプロパティを利用すれば、この位置を変更することができます。
ボックスの左上を「0, 0」としたときの基点の位置を、x軸方向とy軸方向の座標またはキーワードで半角スペースで区切って指定します。値を1つだけ指定した場合は、2つ目の値に「center」を指定したものとみなされます。
3次元の変形効果は、ボックスの中心(505, 50%, 0)を基点として適用されますが、transform-originプロパティを利用すれば、この位置を変更することができます。
ボックスの左上を「0, 0, 0」としたときの基点の位置を、x軸、y軸、z軸方向の座標またはキーワードで半角スペースで区切って指定します。ただし、z軸方向の位置を示す3つ目の値は、実数値+単位でのみ指定できます。パーセント値やキーワードでの指定はできませんので注意してください。
1つ、または2つの値のみ指定した場合は、3つ目の値は「0」を指定したものとみなされます。