css3图片自动原地旋转

CSS3技术为我们提供了非常多的功能，其中之一就是图片自动原地旋转，那么该如何实现呢？可以使用CSS3的transform属性，结合一个简单的动画实现图片的旋转。

.rotate {
    animation:rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

以上代码中，我们为需要旋转的图片添加了一个.rotate类，并设置了一个名为rotate的动画。动画的持续时间为2秒，旋转方式为线性，旋转次数为无限循环。接下来，我们定义了动画的关键帧，从0度开始旋转，经过2秒后旋转至360度，即完成了一次旋转。

在HTML中，我们只需要为图片添加.rotate类，即可实现图片的自动原地旋转。

<img src="example.png" class="rotate" />

以上代码实现了一个简单的CSS3图片自动旋转。当然，我们也可以添加更多的样式来美化旋转效果，例如添加缓动函数、调整旋转中心等等。希望以上代码可以对你有所帮助。