CSS3では様々な動きをつけることができます。
今回はhoverで使える画像の拡大・縮小をご紹介いたします。
transformのscaleで大きさを変えることが可能！
画像を変形させるにはtransformプロパティを使います。
transformのscaleを指定すれば拡大縮小を自由に行うことができます。
画像をhoverで縮小させるには:hoverに
|
1 2 3 4 5 |
transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); |
画像をhoverで拡大させるには:hoverに
|
1 2 3 4 5 |
transform: scale(1.3); -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -o-transform: scale(1.3); -ms-transform: scale(1.3); |
と指定するだけ！
scale(0.7)は70％、scale(1.3)は130％の意味です。
（）内のの数値を変えれば自在に大きさを変更できます。
また、今回は動きを滑らかにするために時間的変化を与えるtransitionも取り入れています。
|
1 2 3 4 5 |
transition: all 0.1s linear; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear; -ms-transition: all 0.1s linear; |
こちらがCSS3で拡大・縮小のsampleです。
左のハムスターはhoverすると小さく、右のぞうはhoverすると大きくなります。
まとめ
今回は拡大・縮小だけをピックアップしましたが、transformで変更出来るのはこれだけではありません。
変形、移動、縮尺、回転、傾きなど要素を自在に変更できる変幻自在のプロパティなのです！
ホームページに関するお悩みは、仙台のホームページ制作アド・エータイプにお任せください！
お気軽にご相談ください。
022-716-3883
営業時間 平日9:30～18:00
関連記事
<< 前の記事
WordPressで現在ページがTOPページかを判定する条件分岐
次の記事 >>
SEO対策でまずやるべき最低限のポイントをピックアップ
Category
最近の投稿
人気の投稿
