CSS3 transform translate系まとめ
transform: translate 系まとめ
transform: に組み合わせる translate 系の関数。
x, y は普通に効くけど z 座標はブラウザによって表示が異なります。
使える関数
- translate(x, y=0)
- translateX(x)
- translateY(y)
- translateZ(z)
- translate3d(x, Y=0, z=0)
transform 系の要素について
適用する要素のpositionはabsoluteにする必要があります。
検証サンプル
わかりやすいようにアニメーションしていますが、下記の CSS のままではアニメーションしません。
translate(x, y = 0)
y が未指定のときは 0 扱いです。
/* x方向に20px, y方向に10px */
.translate {
transform: translate(20px, 10px);
}
translateX(x)
そのまんま、x 座標の移動。translateY、translateZも同様です。
/* 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);
}