WebデザインやUI調整をしていると、
「要素を中央寄せにしたい」＋「ちょっと斜めに傾けたい」という場面があります。
そんなときに便利なのが CSSのtransformプロパティ です。
この記事では、translateX(-50%) に 左へ45度回転（反時計回り） を組み合わせる方法を解説します。
transformとは？
transform は、要素に対して移動・回転・拡大縮小・傾きなどの2D/3D変形を加えるCSSプロパティです。
主な変形の種類は以下の通りです。
| 値 | 内容 |
|---|---|
translateX(n) | X方向（横方向）に移動 |
translateY(n) | Y方向（縦方向）に移動 |
translate(x, y) | X・Y方向に同時移動 |
rotate(angle) | 要素を回転 |
scale(n) | 要素を拡大・縮小 |
skew(x, y) | 要素を傾ける |
中央寄せでよく使う translateX(-50%)
Web制作でよく使われるのが 中央寄せ のテクニックです。
position: absolute;
left: 50%;
transform: translateX(-50%);
この指定は以下の流れで処理されます。
left: 50%;で要素の左端を親要素の中央に合わせるtranslateX(-50%)で要素の幅の半分だけ左に移動し、ちょうど中央に配置する
左に45度回転を加える
「中央寄せ」に加えて 左（反時計回り）に45度回転 する場合は、rotate(-45deg) を追加します。
transform: translateX(-50%) rotate(-45deg);
これで、
- 要素をX方向に-50%移動
- その後、要素全体を反時計回りに45度回転
が適用されます。
順序に注意！
transform の値は記述した順番に実行されます。
順番を変えると、見た目も変わります。
/* 順序A：中央寄せ → 回転（おすすめ） */
transform: translateX(-50%) rotate(-45deg);
/* 順序B：回転 → 中央寄せ（位置がズレやすい） */
transform: rotate(-45deg) translateX(-50%);
ポイント
「まず位置を決めてから回転させたい」場合は、translate → rotate の順がおすすめです。
回転の中心を変えるには transform-origin
デフォルトでは、回転の中心は要素の中央です。
回転の基点を変えたい場合は、transform-origin を使います。
transform-origin: top left; /* 左上を基点に回転 */
transform: translateX(-50%) rotate(-45deg);
実用例：中央配置＋回転
例えば、アイコンやバッジを画面中央に配置して斜めに傾けたいときは、以下のように書けます。
.center-rotate {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
これで、要素は画面の中央に配置され、45度傾いた状態で表示されます。
まとめ
transformでは複数の変形をスペース区切りで順番に指定できる- 順序が変わると見た目も変わるので注意
- 中央寄せ＋回転は
translate → rotateの順がおすすめ - 回転の基点は
transform-originで調整できる
ちょっとした回転や位置調整も、transform を理解して使えば思い通りにデザインできます。
Web制作でよく使うテクニックなので、ぜひマスターしてみてください。