CSS - translate

概要

属性名	translate
値	none \| <length-percentage> [ <length-percentage> <length>? ]?
初期値	none
適用可能要素	トランスフォーム可能要素
継承	しない
サポート	https://caniuse.com/?search=translate

transform の translate() と同様、X軸、Y軸、Z軸方向の移動を行います。値をひとつ指定するとX軸、2つ指定するとX軸とY軸、3つ指定するとX軸・Y軸・Z軸で移動します。

値	説明
none	移動しません。
<length>	移動距離を指定します。

以前は transform プロパティを用いて下記の様に記述する必要がありましたが、translate プロパティでシンプルに記述できるようになりました。

/* 古い記述 */
transform: translate(4rem, 4rem) rotate(180deg) scale(2.0);
/* 新しい記述 */
translate: 4rem 4rem;
rotate: 180deg;
scale 2.0;

CSS

#box1 {
  height: 12rem;
  width: 12rem;
  border: 1px solid #999;
}
#img1 {
  translate: 4rem 4rem;
  scale: 2.0;
  rotate: 180deg;
}

HTML

<div id="box1">
  <img id="img1" src="../../image/juno-tora.png" alt="Tora">
</div>

表示

初版：2022年8月21日、最終更新：2022年8月21日

https://www.tohoho-web.com/css/prop/translate.htm