変形
transform
transform は要素を移動・回転・拡大縮小・傾斜させます。空白で区切って複数の関数を並べると、順番に組み合わさります。
構文
none | <transform-list>
<transform-list> = <transform-function>+プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
transform: translateX(40px) rotate(15deg);
}コントロール
translateX(40px)
<length-percentage>
rotate(15deg)
<angle>
関数を追加
解説
関数の種類
translate()は移動です。%は親ではなく要素自身の大きさに対する割合になります。2 つ目（y）を省略すると0です。rotate()は回転です。正の角度で時計回りに回ります。scale()は拡大縮小です。1（100%）がそのままで、負の値にすると反転します。2 つ目を省略すると 1 つ目と同じ値になります。skew()は傾斜です。2 つ目を省略すると0です。translateX()のように X・Y の付いた関数は、片方の向きだけを指定します。
書く順番で結果が変わる
関数は左から順に、要素の向きや大きさを変えながらかかります。回転してから移動すると、回転した向きに進みます。プリセットの「移動 → 回転」と「回転 → 移動」を見比べてみてください。コントロールのカードを並べ替えても確かめられます。
レイアウトには影響しない
変形しても、要素が占める場所や周りの要素の位置は変わりません。プレビューの点線は、変形する前の位置です。 回転や拡大の中心は transform-origin（初期値は中央の 50% 50%）で変えられます。
気をつけること
none以外を指定すると、その要素がスタッキングコンテキストと、position: fixedの子孫の基準になります。- 単独の
translaterotatescaleプロパティもあり、transformより先に（この順で）かかります。 - コントロールで扱うのは 2D の関数だけです。
rotateX()やperspective()、matrix()はコードに直接書けばプレビューに反映されます。