CSS

transformで図形を移動させよう

transformプロパティを使って図形を移動させていきます。

  • transform: translate()

transform: translate()

・まずは移動に関するプロパティについて学んでいきましょう。今回はtranslate()を使って行きます。

・完成形としてマウスホバーをすると右に80px、下に20px移動するような要素を作っていきたいと思います。今回は上下左右方向の移動量を同時に設定してあげましょう。

・まずは変形後のスタイルを指定していくので:hoverをした箇所を変形させるために.animation:hover{}の中に書いていきます。transform プロパティに値として translate(80px, 20px) としてあげます。

・その上でtransition-property は transform を変化させるので、.animationに対してはtransition-property: transform;と書いていきましょう。

・変化の秒数は1秒にしたいのでtransition-duration: 1s;と書いていきます。

-広告-

 

 






-CSS