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;と書いていきます。
-広告-
|
|