用图像旋转边框

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" />