【CSS Modules】angle型の使い方

angle型は、CSSプロパティにおいて、回転や方向などの「角度」を表すための基本的なデータ型です。この型は、ウェブページ上の要素に対して様々な視覚的な変形やグラフィックス効果を適用する際に、その度合いを数値と単位の組み合わせで指定するために使用されます。

具体的には、要素を回転させるtransformプロパティのrotate()関数や、直線的なグラデーションの方向を決定するlinear-gradient()関数など、角度を必要とする多くのCSSプロパティや関数で利用されます。例えば、要素を時計回りに90度回転させたり、グラデーションを特定の角度で傾けたりする際に、このangle型で角度の値を指定します。

angle型には、角度を表すためのいくつかの異なる単位が存在します。最も一般的に用いられるのは「deg」（度、degrees）で、円を360分割した1つの単位です。その他にも、「grad」（グラード、gradians）は円を400分割する単位、「rad」（ラジアン、radians）は数学的な概念に基づく単位で円を2πラジアンで表し、「turn」（ターン、turns）は円全体を1として表現する単位です。

これらの単位を適切に選択して使用することで、開発者はウェブサイトのデザインにおいて、要素の向きや配置、色の変化などを細かく制御し、多様な表現豊かなユーザーインターフェースやアニメーションを実現することができます。angle型は、視覚的な動きや配置を制御する上で非常に重要な役割を担っています。

Copy
1.example {
2  transform: rotate(90deg); /* 90度 */
3  /* transform: rotate(100grad); */ /* 100グラジアン */
4  /* transform: rotate(1.57rad); */ /* 1.57ラジアン */
5  /* transform: rotate(0.25turn); */ /* 0.25ターン */
6}

引数なし

引数はありません

戻り値なし

戻り値はありません