CSSで要素を上下左右にアニメーション付きで動かす方法/transform:translateの使い方

CSSで要素を「ズラす」には、paddingやmarginで要素との距離を取るという方法がまずあります。しかしこれだと他の要素に対しても影響を及ぼしますし、レイアウト崩れを起こす可能性もあります。そういう心配がないのがtransform:translateです。

transform:translateの使い方
アニメーションで動かしてみる

transform:translateの使い方

paddingやmarginが地動説なら、transform:translateは天動説で、基準となる位置から相対的に要素の位置を変更します。ただ、translateの場合はどこが基準化はそれほど意識しないでも問題ない場合が多いかもしれません。値をひとつしか指定しない場合は、x方向のみの移動となります。

要素を相対的に移動
transform:translate(横への距離,縦への距離)

transform:translate(0)

transform:translate(10px)

transform:translate(20px,10px)

こんな感じで好きな方向に動かすことができます。

アニメーションで動かしてみる

残念ながら、tarnformプロパティにはjQueryのanimateメソッドを使うことはできません。CSSのhoverやjQueryのcssメソッドは有効です。
ちなみにhoverの判定範囲も移動します（↓参照）。

hoverで右に移動


.box{
border:1px solid black; 
width:100px; 
height:100px;
transform:translate(0);
transition:1s;
}
.box:hover{
transform:translate(100%);
}

jQueryで動かすとこんな感じです。

clickで移動

/*CSS*/
.box2{
border:1px solid black; 
width:100px; 
height:100px;
transform:translate(0);
transition:1s;
cursor:pointer;
}

//jQuery
let x = 0;
$('.box2').click(function(){
x = x+50;
$(this).css('transform','translate(' + x + 'px)');
$(this).text(x + 'px右に移動しました');
});