CSS3 transform translate系まとめ

transform: translate系

x,yは普通に効くけどx座標はブラウザによって表示が異なる。

使える関数

・translate(x, y=0)

・translateX(x)

・translateY(y)

・translateZ(z)

・translate3d(x, Y=0, z=0)

transform系の要素について
適用する要素のpositionはabsoluteにする必要がある。

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

trasnlate(x, y=0)
yが未指定の時は0扱い。
/* x方向に30px, y方向に20px */
.translate {
transform: translate(30px, 20px);
}

traslateX(x)
そのまんま、x座標の移動。translateY, translateZも同様。

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

translate3d(x, y = 0,z = 0

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

/* x,y,z方向に20pxずつ /
.translate3d {
transform: translate3d(20px, 20px, 20px);
}
/ 赤いブロックは10px前に出ているはずだが */
.red {
fill: red;
transform: translateZ(10px);
}