CSS3 transform translate系まとめ
create: 2018-10-26
CSS transform

transform: translate 系まとめ

transform: に組み合わせる translate 系の関数。
x, y は普通に効くけど z 座標はブラウザによって表示が異なります。

使える関数

  • translate(x, y=0)
  • translateX(x)
  • translateY(y)
  • translateZ(z)
  • translate3d(x, Y=0, z=0)

transform 系の要素について

適用する要素のpositionabsoluteにする必要があります。

検証サンプル

わかりやすいようにアニメーションしていますが、下記の CSS のままではアニメーションしません。

translate(x, y = 0)

y が未指定のときは 0 扱いです。

/* x方向に20px, y方向に10px */
.translate {
  transform: translate(20px, 10px);
}

translateX(x)

そのまんま、x 座標の移動。translateYtranslateZも同様です。

/* x方向に20px */
.translateX {
  transform: translateX(20px);
}

translate3d(x, y = 0, z = 0)

x,y,z 座標の移動。y, z が未指定の場合は 0 扱いです。
赤いブロックはz=10pxなのですが、紫のブロックがz=20pxに移動しても変化はありません。

<div class='div-frame'>
	<svg><rect  width="80" height="80" class='red'></rect></svg>
	<svg class="translate3d"><rect  width="80" height="80"></rect></svg>
</div>
/* x,y,z方向に20pxずつ */
.translate3d {
  transform: translate3d(20px, 20px, 20px);
}
/* 赤いブロックは10px前に出ているはずなのだが。。。 */
.red {
  fill: red;
  transform: translateZ(10px);
}

labo link

Translate