web网页css的2D转换，鼠标悬停时图片旋转、移动、放大

Web网页的CSS 2D转换主要用于改变元素在屏幕上的视觉效果，包括位置调整、大小变化和形状变换等。当鼠标悬停在一个图片上时，可以利用CSS `transform` 属性实现动态效果：

1. **图片旋转**：通过设置 `transform: rotate(angle)`，可以指定元素绕其中心点旋转的角度。例如，`transform: rotate(45deg);` 可以让图片顺时针旋转45度。

2. **图片移动**：使用 `transform: translate(x, y)` 或 `top` 和 `left` 属性，可以控制元素相对于其原始位置的水平和垂直偏移。如 `transform: translate(50px, 50px);` 让图片向右下角移动50像素。

3. **图片放大/缩小**：`scale(scaleX, scaleY)` 可以缩放元素的大小，第一个参数用于缩放宽度，第二个参数用于缩放高度。比如 `transform: scale(1.2);` 会让图片放大20%。

要实现以上效果，你可以将这些CSS规则应用到`.hover` 类或者其他表示鼠标悬停状态的选择器上，像这样：

img {
  width: 100px;
  height: 100px;
}

.img-hover {
  transition: transform 0.3s ease; /* 添加过渡效果，平滑动画 */
}

.img-hover:hover {
  transform: rotate(45deg) translate(50px, 50px) scale(1.2);
}