【CSS Modules】rotate()関数の使い方

rotate()関数は、CSSのtransformプロパティで使用され、ウェブページの要素を2D平面上で回転させるために実行される関数です。この関数は、指定された要素の視覚的な向きを変更する目的で使用されます。具体的には、引数として回転させる角度の値を渡します。角度の単位は多様で、一般的な「度」を示すdeg（例: rotate(90deg)）、数学的な「ラジアン」を示すrad（例: rotate(0.5rad)）、旧来の「グラディアン」を示すgrad、そして「全回転数」を示すturn（例: rotate(0.25turn)）などが利用可能です。正の値を指定すると要素は時計回りに回転し、負の値を指定すると反時計回りに回転します。回転の基準となる中心点は、デフォルトでは要素の中心に設定されていますが、transform-originプロパティを使用することで、任意の位置に指定し直すことが可能です。これにより、ボタンや画像、アイコンなど、様々なウェブ要素に動きのあるアニメーション効果や装飾的な表現を簡単に追加することができます。rotate()関数は、ユーザーインターフェースにダイナミックな動きをもたらし、より魅力的なウェブ体験を提供する上で重要な役割を果たす関数です。

Copy
1transform: rotate(45deg);

angle: <angle>

• angle: <angle>: 回転させる角度を指定します。

戻り値なし

戻り値はありません