css中鼠标移入图片翻转

CSS中鼠标移入图片翻转是一种常见的效果，它可以让网页更加生动、有趣。这种效果通过CSS3中的transform属性实现，代码如下：

img:hover {
  transform: rotateY(180deg);
}

上面的代码中，我们在img元素的:hover伪类下定义了一个transform属性，其中rotateY函数表示绕着Y轴旋转180度，从而实现图片的翻转效果。

需要注意的是，为了让图片在翻转时保持原来的位置，我们可能需要使用transform-origin属性来定义旋转的原点。例如：

img:hover {
  transform: rotateY(180deg);
  transform-origin: right;
}

上面的代码中，我们将旋转原点设置为图片的右侧，这样图片就会在右侧旋转180度。

除了翻转效果，我们也可以使用CSS中的scale函数来实现图片的缩放效果。例如：

img:hover {
  transform: scale(1.2);
}

上面的代码中，我们将图片放大了20%。与rotateY函数类似，我们也可以通过scale函数的第一个参数来定义缩放的中心点。例如：

img:hover {
  transform: scale(1.2,1.2);
  transform-origin: center;
}

上面的代码中，我们将缩放的中心点设置为图片的中心。

总之，CSS中鼠标移入图片翻转是一种非常有趣的效果，它可以让网页更加生动、有趣。通过了解它的基本实现原理，我们也可以进一步发掘出更多的创意。