css3鼠标移动实现旋转

CSS3技术提供了很多有趣的交互效果，比如鼠标移动实现旋转。

.box {
  width: 200px;
  height: 200px;
  background-color: #E4E4E4;
  transition: transform .3s ease-in-out;
}

.box:hover {
  transform: rotate(360deg);
} 

上面这段CSS代码实现了当鼠标移动到.box元素上时，元素会逆时针旋转360度的效果。这里用到了CSS3的transform属性，它可以改变元素的形状、位置、大小和方向等属性。这里的rotate()函数就是让元素绕着中心点旋转，参数是旋转的度数。

同时，为了更好地呈现动画效果，我们使用了transition属性，用于指定CSS属性变化过渡所需的时长、过渡函数和延迟时间。这里的参数分别是动画时长、缓动函数和延迟时间。

在实际应用中，我们可以根据需求调整元素的大小、旋转角度和动画时长等参数，实现不同的动态效果。