変形
translate
translate は、要素を縦横に動かします。transform の translate() と同じ動きを、transform とは別のプロパティとして書けます。
構文
none | <length-percentage> [ <length-percentage> <length>? ]?プレビュー
コード
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
translate: 40px 20px;
}コントロール
解説
値の書き方
横（x）、縦（y）の順に、動かす長さか % を書きます（translate: 40px 20px）。y を省くと 0 になり、横にだけ動きます。初期値は none で、動かしません。
% は親ではなく要素自身の幅・高さに対する割合です。translate: 100% は自分の幅 1 つ分右へ、translate: -50% -50% は自分の大きさの半分だけ左上へ動かします。
3 つ目に奥行き（z）の長さも書けますが、親に perspective が無いと見た目は変わりません。このページのコントロールでは扱っていませんが、コードには書けます。
このページのプレビューでは、点線の枠が元の位置です。動かしても、周りの要素の配置は元の位置のまま変わりません。
transform との関係
translate・rotate・scale は transform とは別のプロパティなので、重ねて書くとどれも効きます。4 つを全部書くと、transform: translate() rotate() scale() … のように、この順に並べて transform の値の前に足したのと同じになります。そのため、translate で動く向きは rotate や scale の影響を受けません（transform: rotate(45deg) translateX(60px) は回した向きに動きます）。
ほかの変形はそのままにして、動かす量だけをホバーで変えたり、アニメーションしたりするときに便利です。transform で同じことをするには、関数を全部書き直す必要があります。
Chrome・Edge（104 以降）、Firefox（72 以降）、Safari（14.1 以降）が対応しています。