使用css实现一个图片360°旋转并能调整速度的解决方案

要实现一个圆形图片360°旋转并且能调整速度的效果，你需要结合HTML，CSS和JavaScript。下面是一个简单的例子，这个例子使用CSS的animation属性和JavaScript来控制动画的速度。

首先，在HTML中，我们需要一个图片元素和一个按钮元素，按钮用于调整旋转速度。

<img id="rotating-image" src="your-image.jpg" alt="rotating image">
<button id="speed-control">慢</button>

然后，在CSS中，我们需要为图片元素设置一个动画，使其能够进行360°旋转。

@keyframes rotate {
    
    
    0% {
    
     transform: rotate(0deg); }
    100% {
    
     transform: rotate(360deg); }
}

#rotating-image {
    
    
    width: 200px;
    height: 200px;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
}

在这个CSS代码中，我们创建了一个名为rotate的关键帧动画。这个动画从0度开始旋转到360度。然后我们将这个动画应用到ID为rotating-image的图片元素上，设置动画时间为2秒，并且让动画无限次地重复。

接下来，我们需要使用JavaScript来改变动画的速度。当按钮被点击时，我们改变图片元素的animation属性的duration值。

document.getElementById('speed-control').addEventListener('click', function() {
    
    
    var image = document.getElementById('rotating-image');
    if (image.style.animationDuration === '2s') {
    
    
        image.style.animationDuration = '4s'; // 慢速
    } else {
    
    
        image.style.animationDuration = '2s'; // 快速
    }
});

在这个JavaScript代码中，我们监听了按钮的点击事件。当按钮被点击时，我们检查图片元素的animationDuration属性值。如果它是’2s’（快速），我们就将它改为’4s’（慢速）。如果它是’4s’（慢速），我们就将它改为’2s’（快速）。这样，每次点击按钮时，图片的旋转速度就会改变。

参考案例：
漏刻有时数据可视化大屏常用排版HTML和CSS动画(1)：旋转动画

---

@漏刻有时