html - 旋转图像边框

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