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

woman IT

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

Advertisements

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右に移動しました');
});
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。
JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント