今天我们来学习如何使用CSS让图片绕中心旋转。这个效果可以为网页增添不少趣味和动感。
首先，要让图片绕中心旋转，我们需要将图片的位置移动到中心点。我们可以使用CSS的transform属性来实现。代码如下：
img{
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}上面的代码中，我们使用了translate函数来将图片向左上方移动50%的宽度和高度（也就是向中心点移动，因为图片是绝对定位）。
接下来，我们需要给图片添加旋转动画。我们可以使用CSS的animation属性来实现。代码如下：img{
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}在上面的代码中，我们创建了一个名为spin的动画，设置了它的持续时间为2秒，以线性的方式（linear）无限循环播放。在@keyframes规则中，我们设置了旋转动画从0度旋转到360度旋转。
最终的代码实现就像这样：p {
text-align: center;
}
img{
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
animation: spin 2s linear infinite;
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}到这里，我们就成功的实现了图片绕中心旋转的代码，效果如下：