css 过度 图片旋转一周

要实现CSS过渡图片旋转一周的效果，可以使用transform属性和关键帧动画。首先，需要给图片元素添加一个旋转动画，让它自转一周。可以使用@keyframes定义一个名为spin的关键帧动画，设置transform属性的rotate值从0deg到360deg。然后，将这个动画应用到图片元素上，可以使用animation属性指定动画名称、持续时间和循环次数。同时，还需要设置transform-origin属性来指定旋转的中心点。以下是一个示例代码：

<div class="box">
  <img src="./img/1.jpg" alt="" width="300px">
</div>

<style>
.box {
  width: 200px;
  height: 200px;
  border: 1px red solid;
  border-radius: 50%;
  margin-bottom: 100px;
  overflow: hidden;
  transition-property: all;
  transition-duration: 1.25s;
}

.box img {
  margin-left: -80px;
  margin-top: -30px;
}

.box:hover {
  transform: rotate(360deg);
}
</style>

在上述代码中，给包裹图片的div元素添加了一个box类，并设置了宽度、高度、边框等样式。图片元素使用img标签，并设置了宽度。通过给box类添加:hover伪类，当鼠标移入时触发旋转效果，使用transform属性的rotate值设置为360deg，即旋转一周。

希望这个解答对您有帮助！[2]