【CSS Modules】rotateプロパティの使い方

rotateプロパティは、HTML要素を2次元平面上で回転させるための角度を保持するプロパティです。このプロパティを使用すると、指定した要素がその中心点（デフォルト）を基準にZ軸を中心に回転します。

具体的な機能としては、要素を時計回りまたは反時計回りに指定した角度だけ傾けることができます。例えば、画像やボタン、テキストブロックなどの視覚的な要素に動きやアクセントを加えたい場合に非常に有効です。

値は角度の単位を用いて指定します。一般的には「deg」（度）がよく使われ、例えば「90deg」と指定すれば90度時計回りに回転します。その他にも「rad」（ラジアン）や「grad」（グラード）、「turn」（回転数）などの単位も利用可能です。正の値を指定すると時計回りに、負の値を指定すると反時計回りに回転します。

これまで要素の変形を行う際にはtransformプロパティ内でrotate()関数を使用していましたが、rotateプロパティはtransformプロパティの個別プロパティとして提供されています。これにより、scale（拡大縮小）やtranslate（移動）などの他の変形プロパティと組み合わせて記述する際に、より簡潔で分かりやすいコードを書くことが可能になります。

回転の中心点は、デフォルトでは要素の中心ですが、transform-originプロパティを使用することで、回転の中心を自由に指定することができます。これにより、要素の左上や右下など、任意の点を中心として回転させることが可能となり、表現の幅が大きく広がります。

ウェブページのデザインにおいて、アニメーション効果やインタラクティブな要素を作成する際に、このrotateプロパティは非常に重要な役割を果たします。

Copy
1rotate: 45deg;

引数なし

引数はありません

戻り値なし

戻り値はありません