img{
  width: 100%;
  transform-style: preserve-3d;
  transition: all 1s;
}

鼠标悬浮hover

img:hover{
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}

其中180deg为翻转的度数，transition: all 1s为翻转时间，rotateY为翻转坐标（可改为rotateX）