CSS

transformで図形をリサイズさせよう

transformプロパティを使って図形をリサイズさせていきます。

  • transform: scale()
  • 複数の変形

transform: scale()

・ではリサイズすることができるプロパティについて学んで行きます。scale()を使っていきましょう。

・完成形としてマウスホバーすると横幅が1/2になって縦が2倍になりように変形させたいと思います。

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

・また小数点の場合0は省略できるので.5 と書くこともできます。

複数の変形

・注意点として複数の値を使う場合は順番が大切で、translateX で右方向に 100px 移動させて、 rotate で 30 度としてあげれば横にいってから回転するという動きになりますが、

・逆にするとrotate を先にすると、回転してから移動するという変化になり、回転してから移動するので、今度は右下のほうに来てしまいます。

-広告-

 

 







-CSS