変形
rotate
rotate は、要素を回転させます。transform の rotate() と同じ回転を、transform とは別のプロパティとして書けます。
構文
none | <angle> | [ x | y | z | <number>{3} ] && <angle>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
rotate: 30deg;
}コントロール
<angle>
x | y | z
解説
値の書き方
回す角度を deg（度）・turn（回転）・rad・grad で書きます（rotate: 45deg）。正の値で時計回り、負の値で反時計回りに回ります。初期値は none で、回しません。
回す中心は transform-origin（初期値は要素の中央）です。このページのプレビューでは、点線の枠が元の位置です。回しても、周りの要素の配置は変わりません。
軸を選ぶ
角度の前か後ろに x・y・z を書くと、その軸を中心に回します。省くと z（画面に垂直な軸）で、ふつうの回転です。
x：横の軸を中心に、上下が奥と手前に倒れます。y：縦の軸を中心に、左右が奥と手前に回ります。y 180degで左右が裏返ります。
親に perspective が無いと奥行きが付かないので、x 軸で回すと縦に、y 軸で回すと横に縮んで見えます（x 60deg なら高さが半分になります）。
軸を 3 つの数で書く書き方（rotate: 1 1 0 45deg）は、このページのコントロールでは扱っていませんが、コードには書けます。
transform との関係
translate・rotate・scale は transform とは別のプロパティなので、重ねて書くとどれも効きます。4 つを全部書くと、transform: translate() rotate() scale() … のように、この順に並べて transform の値の前に足したのと同じになります。ほかの変形はそのままにして、角度だけをホバーで変えたり、アニメーションしたりするときに便利です。
Chrome・Edge（104 以降）、Firefox（72 以降）、Safari（14.1 以降）が対応しています。