WEB(K)Campus-ウエブ系キャンパス-

娯楽は少なめ。備忘録がほとんどのキャンパスノート代わりのWeb系のメモサイトです

  • メール・お問い合わせ
  • Twiieerのリンク
  • ピンタレストのリンク

(K)ロールオーバー時に画像が拡大したり回転したりするCSS3を試した

css_scale_top

ブログサイトでアイキャッチ画像にマウスを合わせると、画像が拡大するアニメーションがあります。

CSS3の「transform:」を使うことで、比較的簡単にアニメーション効果を実現できます。そんな訳で今回はCSS3を使って画像をロールオーバーした時に画像が拡大するアニメーションの備忘録

「transition:」と「transform:」を設定

「transform: scale();」プロパティを設定して、拡大させて
「transition: transform」でアニメーション速度の設定をします。

【HTML】

<div class="scale_anime">
<img src="img/img01.jpg" alt="大きくなる画像"/>
</div>

拡大しても、横と縦幅が動かさないために<img>を<div>で囲ってます。

【CSS】

.scale_anime {
width: 300px;
height: 300px;
overflow: hidden;
}

.scale_anime img {
width: 100%;
}

.scale_anime img:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-moz-transition: -moz-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
-o-transition: -o-transform 0.3s;
-ms-transition: -ms-transform 0.3s;
transition: transform 0.3s;
}

「拡大」と「回転」のアニメーションの組み合わせ

拡大は「scale」で、回転は「rotate」で指定できます。2つの変形を組み合わせるのは以下の様な記述でできるようです。

.scale_anime02 img:hover {
-webkit-transform: scale(1.5) rotate(20deg);
-moz-transform: scale(1.5) rotate(20deg);
-o-transform: scale(1.5) rotate(20deg);
-ms-transform: scale(1.5) rotate(20deg);
transform: scale(1.5) rotate(20deg);
}

「deg」は「角度」の単位。今回は20度傾かせる感じ

2つの種類のアニメーションのDEMOは以下

DEMO

まとめ

ブラウザ対応を考えると、アニメーションといえばjQuery が一般的で、CSSのtransformのプロパティは、あまり今まで触ってなかったんですが、これを機に理解度を深めていきたいと思います。「t」で始まる単語が多すぎてこんがらがりそうですが・・・今回は以上ですm(_ _)m

  • このエントリーをはてなブックマークに追加

コメントする

  • サイト内検索

  • About Me

    けぃしぃ(@Kc_fuji)

    WEB制作会社に務めるサラリーマンです。 DTP、WEB制作、映像編集 チョコチョコやってます。
    このブログは、制作の覚え書きとWordpressの実験所として利用しています。

  • Recent post

  • Category

  • Twitter

  • Archives

    • 2017 (4)
    • 2016 (4)
    • 2015 (19)
    • 2014 (33)
    • 2013 (25)
  • ページの先頭へ