【CSS】画像をhoverで時計回りにくるっと回転させる

Adsenseの乞食記事が最新投稿であるという状態が個人的に好ましくないので、
とりあえずプログラミングっぽい記事を書いておきます。
CSS初心者です。

.hatena-module-circles .circle-image {
  border: 1px solid #dddddd;
  border-radius: 50%;
  margin: 2px;
  transition: 1.0s;
}
.hatena-module-circles .circle-image:hover {
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  transition: transform 0.2s ease-out;
  -webkit-transition: -webkit-transform 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out;
}

画像の上にマウスが乗ったときに、時計回りにくるっと一回転させるCSSです。
当ブログでは参加グループ画像の部分にこのCSSが適用されています（記事投稿時点）。

ポイントというほどでもありませんが、
画像を"border-radius: 50%;"で丸くしている方が、回った時に綺麗で効果的かもしれません。

また、上の例では本体とhoverでtransrationの値が異なっているので、
オンマウス時には0.2秒でくるっと素早く回転し、
マウスアウト時には1秒かけてくるーっとゆっくり戻るようになっています。

ちなみに"360deg"を"720deg"とかにすれば、くるくるっと2回転させることもできます。

おわり。