这段代码怎么用css让鼠标经过icon图标时，图片顺时针旋转90度，有过渡效果，而不是一瞬间完成，鼠标离开icon时，逆时针回去<div class="again-upload"> <Icon name="sync" :color="cropperIconColor" class="cropper-svg-icon" />重新上传 </div>

你可以使用CSS3中的transform属性以及transition属性来实现这个效果。具体做法如下：

1. 首先，给你想要旋转的图标添加一个CSS类，比如"rotate-icon"。

2. 然后，在CSS中为这个类添加如下样式：

.rotate-icon {
transform: rotate(0deg); /* 将图标初始设置为不旋转 */
transition: transform 0.3s ease-in-out; /* 定义过渡效果 */
}

3. 接下来，在你需要触发旋转的地方，比如鼠标悬停事件中，为这个图标添加另一个CSS类，比如"rotate-90"。

4. 最后，在CSS中为这个类添加如下样式：

.rotate-90 {
transform: rotate(90deg); /* 定义旋转角度 */
}

5. 同时，在CSS中为你的div元素添加:hover伪类选择器，使其在鼠标悬停时应用rotate-90类。

6. 最后，在CSS中为你的div元素添加另一个:hover伪类选择器，使其在鼠标离开时应用rotate-icon类。

完整代码如下：

.again-upload {
  display: inline-block;
}

.cropper-svg-icon {
  height: 24px;
  width: 24px;
}

.rotate-icon {
  transform: rotate(0deg);
  transition: transform 0.3s ease-in-out;
}

.rotate-90 {
  transform: rotate(90deg);
}

.again-upload:hover .cropper-svg-icon {
  cursor: pointer;
}

.again-upload:hover .cropper-svg-icon {
  cursor: pointer;
}

.again-upload:hover .cropper-svg-icon {
  transform: rotate(90deg);
}

.again-upload:hover .cropper-svg-icon {
  transform: rotate(0deg);
}

这样，当你鼠标悬停在图标上时，它就会顺时针旋转90度，并且会有一个0.3秒的过渡效果；当你鼠标离开图标时，它就会逆时针回到原来的位置，并且也有一个0.3秒的过渡效果。