cssで角度を設定する機会というのはそれほど多くはないですが、
設定する際に、「どの向きだったっけ」「回転方向ってどっち回りっだったけ」と思ったことは一度ではないと思います。
そんなCSSで角度を使用にまつわる内容を見ていきたいと思います。

CSSで使える角度の単位

CSSで使用できる角度の単位は4つ存在します。（2023/03/13現在）
馴染みの深いものから、いつから使えたのかわからないものまで存在し、さまざまな設定方法が存在します。
現在、CSSとして使用できる角度の単位は下記の通りです。

• deg
• grad
• rad
• turn

deg

deg は英語で degree の略称で、日本では一般的に使われている、度数法表記の単位になります。
１周を 360° で表し、 直角を 90° と表現します。
一番馴染みのある角度単位ではないでしょうか。

grad

grad は英語で gradian（グラード） の略称で、世界的にあまり普及してはいませんが、
歴史は古く、１８世紀末に角度も10進法にしようとした試みの中で生まれた単位になります。
１周を 400^g で表し、直角は 100^g と表します。
10進法は馴染み深いので、割と分かりやすいのかなと思います。
グラード (単位)

rad

rad は英語で radian（ラジアン） の略称で、国際単位系における角度の単位として使われ、物理の分野でよく使用される単位になります。
１周を 2π で表し、 直角は π/2 rad と表現します。
ラジアン

turn

turn は回転数で表した単位になります。
１周を 1turn で表し、 直角は 0.25turn と表現します。

角度を使用することができるCSS関数

CSSプロパティの値として直接使えるのは rotate ぐらいのものですが、
値にCSS関数を利用した場合、角度を必要とするもしくは角度の設定をすることができるものは意外なほど多く存在します。

座標変換関数

rotate()

単位付きの引数を一つ取り、要素は設定された角度が正の数の時に時計回りに回ります。

rotate3d()

引数を4つ取り、第４引数に単位付きの値を設定します。
第１引数から第３引数で求められる回転軸の正方向を手前に向けた時、設定された角度が正の数の時に時計回りに回ります。

rotateX()

単位付きの引数を一つ取り、要素はx軸の正方向を手前に向けた時、設定された角度が正の数の時に時計回りに回ります。

rotateY()

単位付きの引数を一つ取り、要素はy軸の正方向を手前に向けた時、設定された角度が正の数の時に時計回りに回ります。

rotateZ()

単位付きの引数を一つ取り、要素はz軸の正方向を手前に向けた時、設定された角度が正の数の時に時計回りに回ります。
rotete() と同じ動きになります。

skew()

単位付きの引数を最大2つ取り、第１引数はX軸方向に対して変形し、第２引数はY軸方向に対して変形します。
第１引数に正の数を設定した場合、反時計回りに要素は傾いていきます。
第２引数も同様に正の数を設定した場合、反時計回りに要素は傾いていきます。
括弧内の設定値の合計が ±(270n + 90) になった場合、要素は見えなくなってしまします。(cos90° or cos270°) == 0 の為
注：JSでMath.cos(Math.PI/2)を求めた際には丸め誤差の問題もあり0になはりません。 変形の仕組みに関してはこちらからご確認ください
フーノぺーじ transform:skewの仕組みを理解する。

skewX()

skew() の第２引数に０を設定した変形と同じになります。

skewY()

skew() の第１引数に０を設定した変形と同じになります。

数学関数

calc()

値の計算ができます。
しかしながら角度の単位に関しては、角度単位同士でしか加算、減算はできなく、
乗算・除算・剰余は数（数値）でしかできません。

clamp()

引数を3つ取り、最小値、推奨値、最大値の中から当てはまる値を取得できます。
角度を使用して数値を取得する際は全ての引数で角度単位を使用する必要があります。
違う単位が混ざっている場合は動作しません。
注：Safari（Mac,iOS,iPadOS）ではブラウザ幅の可変時ににおける値の反映がブラウザの仕様上動作しないことがあります。

max()

引数の中から最大値のものを取ります。
角度で使用する場合には引数は全て角度の単位の値である必要があります。

min()

引数の中から最小値のものを取ります。
角度で使用する場合には引数は全て角度の単位の値である必要があります。

sin()

引数には角度の単位を持った値 もしくは 数値を1つ引数として取ります。
角度の単位はそのままの値として使用しますが、数値を指定した場合はラジアンとして解釈されます。
正弦定理の値を算出し値は -1 ~ 1 を表します。

cos()

引数については sin() と同じになります。
余弦定理の値を算出し値は -1 ~ 1 を表します。

tan()

引数については sin() と同じになります。
正接定理の値を算出し値は −∞ ~ +∞ を表します。

数学関数（引数に角度単位の数値ではなく返り値が角度単位となるもの）

asin()

引数は1つの数値のみを取ります。設定できる数値は -1 ~ 1 の間になります。
取得できる値は -90deg ~ 90deg の間になります。

acos()

引数については asin() と同じになります。
取得できる値は 0deg ~ 180deg の間になります。

atan()

引数は1つの数値のみを取ります。設定できる数値は −∞ ~ +∞ の間になります。
取得できる値は -90deg ~ 90deg の間になります。

atan2()

引数は2つ取ることができますが、どちらも同じ単位である必要があり、使用できる値は数、距離（長さ）、％になります。
取得できる値は引数を座標とした際のx軸との角度を取得でき 0° ~ 360° になります。

フィルター関数・色関数

hue-rotate()

角度単位の引数を与えることで、色相環上のカラーコードを取得できます。

hsl()

引数を3つ取り、第１引数に角度単位の数値を設定します。
第１引数で指定した色相環の位置を、第２、３引数によって明度・彩度を変更したカラーコードを取得できます。
第２引数、第３引数ともに設定できる数値は % になります。

hsla()

hsl() に第４引数として不透明度を加えたものになります。
第４引数に設定できる値は % もしくは 数 になります。

hwb()

引数を3つもしくは4つ取ることができ、第１引数に角度単位の数値を設定します。
第１引数は色相環、第２引数は白色度、第３引数は黒色度をとり、第２、３引数に設定できる値は % になります。
第４引数に設定する値は不透明度で、設定できる値は % もしくは 数 になります。こちらを設定する際には第３引数と第４引数とを / で区切る必要があります。

画像関数

conic-gradient()

要素の中央から円状にグラデーションを描くための関数になります。
角度指定は色の切り替わりが円状のどこまでなのかを指定するために使用します。
使用方法はMDNの解説をご覧ください。
MDN conic-gradient()

linear-gradient()

第１引数に方向を指定しますが、角度単位の数値 もしくは キーワード(left, rightなど) を取ります。
角度単位を指定したときは、0° == 下から上への向き を表し、第２引数がスタートの色で後に続く引数がグラデーションの色となります。
詳しい設定方法はMDNの解説をご覧ください。
MDN linear-gradient()

repeating-linear-gradiant()

linear-gradient() と同じ引数を取ります。background-size, repeatを使用することなく、背景をパターンで埋めることができます。
詳しい設定方法はMDNの解説をご覧ください。
MDN repeating-linear-gradiant()

よくある使い方

rotate関数

「web要素における座標軸について」で図を作成していますが、その矢印なんかは際たる例ではないかなと思います。
他にも、こういったもので言うならばアコーディオンの開閉に使う十字のアイコンだったり、下向き三角だったりのアニメーション、
もっと使うもので言えば、ハンバーガーメニューのクリック時のアイコンなんかはアニメーションさせるのによく使うのではないかと思います。
実際矢印（＞）みたいなアイコンは一つ作っておいて、いろいろなところで使い回し、
場所に合わせて回転させることで、四方を表現するのではないかと思います。

skew関数

conic-gradient関数

linear-gradient関数

この関数ではグラデーションをするだけでなく、色を切り替えるようにして表現することもできます。
このことを使って、市松模様だったり、千鳥格子までできたりします。
柄の生成についてはいろいろなジェネレーターがあるのでそちらから試してみてください。
Google 「linear-gradient generator」で検索

まとめ

角度に関するCSSの内容を書きましたが、調べていくうちに「知らなかった」「こうやって使うんだ」と言う学びがありました。
実際業務で使うことはあまりないようなものが多いですが、表現として知っておいた方が幅が出る内容ばかりの関数だったと思います。
iOS の safari に css の三角関数が入ってきたのはつい最近なので、どんな表現ができるのかはこれからだと思いますが、
今までできなかったことができるようになることは間違いありません。
ここに載っていない関数があるので、また何か機会があれば掘り下げていきたいと思います。