【CSS Modules】rotateY()関数の使い方
rotateY()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
rotateY()関数は、CSSのtransformプロパティの一部として、HTML要素をY軸（縦方向の軸）を中心に回転させるための関数です。この関数を使用すると、要素をあたかも手前や奥へ傾けるかのように、立体的な視覚効果を与えることができます。
引数には、回転させたい角度を単位付きで指定します。例えば、90degと指定すると90度回転し、45degと指定すると45度回転します。正の値を指定すると要素の右側が奥へ、左側が手前へ向かうように回転し、負の値を指定するとその逆の方向に回転します。これにより、平面的なWebページ上の要素に奥行きや立体感を持たせることが可能になります。
Webページにおいて、画像やテキストなどの要素は通常、2次元の平面上に表示されますが、rotateY()関数を用いることで、その平面に3次元的な動きを与えることができます。例えば、カードが裏返るようなアニメーションや、本をめくるような動きを表現する際に利用されます。これは、要素の見た目を変化させることで、ユーザーインターフェースに動きとインタラクティブ性をもたらす重要な機能の一つです。
transformプロパティにはrotateY()の他にも、位置移動を行うtranslate()や拡大縮小を行うscale()など、様々な変換関数があり、これらを組み合わせることでより複雑な動きを作り出すことができます。rotateY()は、Webデザインにおいて視覚的な表現力を高め、ユーザー体験を向上させるための基本的な3D変換機能として広く活用されています。
構文(syntax)
1transform: rotateY(angle);
引数(parameters)
angle: <angle>
- angle: <angle>: Y軸を中心に回転させる角度を指定します。
deg（度）、rad（ラジアン）、grad（グラード）、turn（ターン）などの単位が使用できます。
戻り値(return)
要素をY軸を中心に回転させるためのCSSのtransform関数です。