CSS

transformで図形を回転させよう

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

  • transform: rotate()

transform: rotate()

・では要素を回転させるプロパティについて学んでいきます。 rotate()を使っていきましょう。

・完成形としてマウスホバーすると45度回転するようなアニメーションを作っていきたいと思います。

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

・その上でtranslate()のときと同様に.animationに対してtransition-property: transform;としてtransition-duration: 1s;で変化時間を指定してあげればおkです。

-広告-

 

 






-CSS