transform

要素の通常の配置を保ったまま、見た目を移動・回転・拡大縮小するプロパティ。元の位置と変形後を重ねて比べられます。

遊んでみよう

点線は通常フローに残る元の位置

TRANSFORMカード

横 28px・縦 -12px・回転 8度・拡大 110%

CSS

.element transform: translate(28px, -12px) rotate(8deg) scale(1.1);

値のパターン

横へ移動 translateX()28px

縦へ移動 translateY()-12px

回転 rotate()8deg

拡大縮小 scale()110%

transformの構成要素

01translate()

移動

translate(x, y)で、要素を元の位置から横方向・縦方向へ見た目上移動します。

02rotate()

回転

正の角度で時計回り、負の角度で反時計回りに、既定では要素の中心を軸に回転します。

03scale()

拡大縮小

1を基準に、1より大きい値で拡大し、0から1の値で縮小します。

早見表

初期値はnoneです。変形関数は空白で並べられ、書いた順序によって最終的な見た目が変わります。

01none変形しない初期値

02translateX(24px)右へ24px移動移動

03translate(12px, -8px)右と上へ移動2軸

04rotate(15deg)時計回りに15度回転回転

05scale(1.2)縦横を1.2倍に拡大拡大

06skewX(10deg)横方向へ10度傾ける傾斜

07translateX(24px) rotate(8deg)移動と回転を組み合わせる組み合わせ

よくある使い方

ボタンを少し持ち上げる

ポインターやキーボードのフォーカスに合わせ、位置を少し上へ動かして操作状態を伝えます。

.button:hover, .button:focus-visible { transform: translateY(-2px); }

アイコンの向きを変える

開閉状態に合わせて矢印を回転させると、内容が開いているかを形でも示せます。

.details[open] .icon { transform: rotate(180deg); }

カードを拡大して強調する

レイアウトを押し広げずにカードを少し拡大し、選択中の項目を目立たせます。

.card.is-active { transform: scale(1.04); }

ポイント

変形関数は、書く順序で結果が変わる。

transform: translateX(40px) rotate(20deg) と rotate(20deg) translateX(40px) では、移動に使う軸も回転するため結果が異なります。transformは通常の文書フローを組み直さず、元の配置領域を残したまま見た目を変えます。none以外では重ね合わせコンテキストが作られるため、重なり順にも注意します。変形可能な要素へ適用され、子要素へ継承されません。大きな動きや拡大をtransition・animationと組み合わせるときは、動きを減らす設定にも配慮します。