マウスホバーで画像を回転させる

.rotatePhoto {
  width: 300px;
  height: 300px;
  overflow: hidden;
}
.rotatePhoto img {
  transition: 0.5s;
}
.rotatePhoto img:hover {
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}

参考サイト

web屋

画像をマウスオーバーしたときに効果を与えるメモ4つ #CSS

http://webya-tm.com/made/201405301703