【CSS Modules】rotateZ()関数の使い方
rotateZ()関数の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
rotateZ()関数は、CSSのtransformプロパティで使用され、HTML要素をZ軸を中心に回転させるための関数です。このZ軸は、画面の手前から奥に向かって貫く軸を指しており、要素が手前に傾いたり奥に傾いたりするような、奥行きを伴う回転ではなく、要素がその場で平面的に回転するような効果を実現します。
この関数は、引数として回転させる角度を指定します。角度の単位には、一般的な度数であるdeg（例: 90deg）、ラジアンであるrad（例: 1.57rad）、または周回数であるturn（例: 0.25turn）などが利用できます。指定された角度が正の値であれば時計回りに、負の値であれば反時計回りに要素が回転します。
主に、アニメーションの作成や、要素の視覚的な向きを変更する際、またはインタラクティブなユーザーインターフェースで要素に動的な動きを持たせる場面で利用されます。例えば、ローディングアイコンの回転や、ボタンがクリックされた際に少し傾くような表現などに役立ちます。
rotateZ()関数は、rotateX()（X軸中心の回転）やrotateY()（Y軸中心の回転）といった他の3D回転関数とは異なり、要素が平面上で回転する効果を持ちます。また、rotate()関数は、デフォルトでrotateZ()と同じ効果を発揮します。これらのtransformプロパティと組み合わせて使用することで、ウェブページの要素に多彩な視覚表現を加えることが可能です。
公式リファレンス: rotateZ()
構文(syntax)
1.element { 2 transform: rotateZ(45deg); 3}
引数(parameters)
<angle>
- <angle>: 要素をZ軸周りに回転させる角度を指定します。正の値は時計回り、負の値は反時計回りに回転します。
戻り値(return)
戻り値なし
戻り値はありません