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

rotateX()関数は、HTML要素を3D空間においてX軸（水平方向の軸）周りに回転させるために使用されるCSSのtransformプロパティの関数です。この関数は、要素の見た目を指定した角度だけ変形させ、奥方向や手前方向に傾いたような視覚効果を表現します。

引数として回転角度を一つだけ取り、例えばrotateX(45deg)のように記述します。角度の単位には、deg（度）、rad（ラジアン）、grad（グラジアン）、turn（ターン）などが利用できます。正の値を指定するとX軸を中心に時計回りに（要素の上端が奥に、下端が手前に）回転し、負の値を指定すると反時計回りに（要素の上端が手前に、下端が奥に）回転します。

主に、カードが裏返るアニメーションや、奥行きのあるナビゲーションメニュー、立体的なギャラリーなどのインタラクティブなUIコンポーネントの作成に応用されます。rotateX()関数は、transformプロパティの値として単独で使用することも、transform: rotateX(45deg) translateY(10px);のように他のtransform関数（translate(), scale(), rotateY()など）と組み合わせて、より複雑な変形を実現することも可能です。

要素に自然な3Dの遠近感を与えるためには、通常、要素の親要素にperspectiveプロパティを設定することが推奨されます。これにより、回転する要素に奥行きが加わり、よりリアルな3D効果が実現され、見る人にとって視覚的に理解しやすい表現となります。システムエンジニアを目指す初心者の方々がWebページにインタラクティブなアニメーションや3D効果を実装する際に、基本的なツールの一つとして活用できるでしょう。

Copy
1transform: rotateX(angle);

• <angle>: X軸周りの回転角度を指定します

戻り値なし

戻り値はありません