transformプロパティを使って図形を回転させていきます。
- transform: rotate()
transform: rotate()
・では要素を回転させるプロパティについて学んでいきます。 rotate()を使っていきましょう。
・完成形としてマウスホバーすると45度回転するようなアニメーションを作っていきたいと思います。
・まずは変形後のスタイルを指定していくので:hoverをした箇所を変形させるために.animation:hover{}の中に書いていきます。transform プロパティに値としてrotate(45deg); としてあげます。
・その上でtranslate()のときと同様に.animationに対してtransition-property: transform;としてtransition-duration: 1s;で変化時間を指定してあげればおkです。
-広告-
|
|