CSS3アニメーション：ズームアップ

サンプルはこちら。ドアラにマウスオンしてください。

サンプルのように人の写真でやると面白いです。

HTML

<div class="imgCircle"></div>

これだけです。

CSS(Sass)

.imgCircle {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-image: url(***.jpg);
  background-position: center center;
  background-size: auto 100%;
  @include border-radius(200px);
  transition:.5s;
}
.imgCircle:hover {
  background-size:auto 150%;
  @include transform(rotate(10deg));
}

この手法のキモは、タグによる画像ではなくCSSの背景画像を利用する点です。
タグの画像より背景画像の方が縦横中央に簡単に揃えられるためです。

9行目にtransitionを設定し、0.5秒でhover時の変化を行うようにしています。

hoverでは背景のサイズを拡大し、若干回転させて傾けています。