CSSで要素を45度回転させる

rotateZ()による要素の回転

rotateZ()関数（または単にrotate()）は、画面からビューアーに向かうZ軸を中心に要素を時計回りに回転させます。

CSS

.rotated {
  transform: rotateZ(45deg);
}

主要な概念

• 正の値は時計回りに回転：rotateZ(45deg)で要素が右に45度回転
• 負の値は反時計回りに回転：rotateZ(-45deg)で左に回転
• 1回転は360度：rotateZ(360deg)で元の位置に戻る

Transform Origin

デフォルトでは、回転は要素の中心（transform-origin: center center）を軸に行われます。基準点を変更できます：

.corner-rotate {
  transform: rotateZ(45deg);
  transform-origin: top left;
}

これは要素を左上角を軸に回転させ、まったく異なる視覚的結果を生みます。

よくあるパターン

• ダイヤモンド形状：正方形を45度回転してダイヤモンドを作成
• アイコン回転：ドロップダウン状態を示すためにシェブロンアイコンを回転
• 装飾的な角度：セクション区切りやバッジに視覚的なアクセントを追加