使用图像旋转边框

Question

我有一个旋转180度的图像，我想在它周围加上一个边框。问题是，当我这样做的时候，当图像旋转时，边框停留在同一位置。如何使边框与图像一起旋转？我将使用一个手部类比来演示图像的旋转：**用左手**起始点-手在你面前，手掌面向你。当鼠标悬停在图像上时-将手旋转180度，直到你看到你的关节。当鼠标离开图像时，手转动180度，直到你可以再次看到你的手掌。

如前所述，如何使图片边框与图像一起旋转？

Answer 1

你可以在你的图像悬停上使用rotateY()：

演示

​

img {
  border: 5px solid black;
  transition: all 0.6s;
}
img:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<img src="http://placekitten.com/g/300/300" />

​