CSS 可以轻易地实现图片的旋转，而其中一种比较炫酷的效果是让图片以圆心旋转。下面就让我们来看一下具体怎么做吧。

.rotate {
width: 200px;
height: 200px;
position: relative;
}
.rotate img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
animation: spin 5s linear infinite;
transform-origin: 50% 50%;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

这里我们创建了一个 .rotate 的容器，使用相对定位（position: relative;）使内部的 img 使用绝对定位（position: absolute;）。我们给 img 设置了宽度和高度都为 100%，并设置了 50% 的圆角，即将图片变成圆形。

接着，我们定义了一个名为 spin 的旋转动画，持续时间为 5 秒，采用线性动画，无限循环，作用于 img 标签。transform-origin 属性用来设置旋转的中心点，这里我们设置为图片的正中心（50% 50%）。

最后，我们在 HTML 中使用这个样式类，将需要旋转的图像放在 .rotate 容器中即可。

<div class="rotate">
<img src="rotate-image.png" alt="Rotate Image">
</div>

这样做就可以实现一个带有圆心旋转效果的图片了。需要注意的是，这种效果对性能消耗比较大，如果需要一次旋转多个图片，需要考虑一些优化手段来减少性能的消耗。