【CSS Modules】transform-originプロパティの使い方

transform-originプロパティは、CSSのtransformプロパティによって要素に適用される変形の基準点（原点）を保持するプロパティです。要素を回転させたり、拡大縮小させたり、傾斜させたりする際に、その変形がどの位置を中心に行われるかを指定するために使用されます。

このプロパティを適切に設定することで、要素の変形アニメーションやインタラクションが、より意図した通りに、そして自然に見えるようになります。例えば、デフォルトでは要素の中心が変形の基準点となりますが、transform-originプロパティを使うことで、要素の左上隅や右下隅、または任意の座標を変形の基準点として設定できます。

値の指定方法としては、主に2つの値を設定し、それぞれが横方向（x軸）と縦方向（y軸）の基準点を表します。例えば、「left top」や「20px 30px」、「25% 75%」のように指定します。3次元の変形を扱う場合は、3つ目の値としてZ軸方向の基準点を指定することも可能です。キーワード、長さの単位（px, emなど）、パーセンテージ（%）を組み合わせて柔軟に設定できます。初期値は「50% 50%」であり、これは要素の中心を意味します。このプロパティを理解し活用することで、複雑なレイアウトや動的なUI要素の作成において、より表現豊かなデザインを実現できます。

Copy
1selector {
2  transform-origin: left top;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません