[分享]css3怎么让图片自己转

CSS3是一种用于网站设计和排版的技术，它可以让网页设计变得更加丰富和炫酷。在CSS3中，我们可以使用一些动画效果来让网页更加生动。本篇文章将介绍如何使用CSS3让图片自己转起来。//定义一个clas...

CSS3是一种用于网站设计和排版的技术，它可以让网页设计变得更加丰富和炫酷。在CSS3中，我们可以使用一些动画效果来让网页更加生动。本篇文章将介绍如何使用CSS3让图片自己转起来。

//定义一个class样式，名字为rotate
.rotate{
    /* 兼容性处理 */
    -webkit-animation: rotate 2s infinite linear;
    -moz-animation: rotate 2s infinite linear;
    -o-animation: rotate 2s infinite linear;
    animation: rotate 2s infinite linear;
}
//定义一个动画名称为rotate
@keyframes rotate{
    0%{ transform: rotate(0deg); }
    100%{ transform: rotate(360deg); }
} 

上面的代码就是CSS3让图片自己转的样式，我们来一一解析下：

首先，我们给这个样式取了一个名字叫做rotate。然后在样式中定义了一个动画名称也叫做rotate。接着，在动画中定义了transform属性，这个属性可以让图片倾斜、旋转等。我们现在是通过旋转让图片转圈，所以设置了transform: rotate(360deg)。这个代表图片会按照一周360度的速度转动，当然也可以根据需要调整这个数值。

接下来是动画的关键，我们设置了animation属性，这个属性会告诉浏览器应该执行哪个动画。其中的关键帧动画和动画的时间设置如下：

• 0%：初始状态
• 100%：最终状态
• 2s：动画执行的时间，这里我们设置为2秒
• infinite：动画重复执行的次数，这里设置成无限循环。
• linear：动画的速度函数，这里我们设置成匀速。

最后，将样式应用到你想要旋转的图片上，HTML代码如下：

<img src="example.jpg" class="rotate"> 

最后，这是效果图：

使用CSS3让图片旋转的效果很简单，只需要定义一个动画，然后将这个动画应用到图片上即可。除了旋转，CSS3还有很多其他的动画效果，感兴趣的读者可以自己尝试一下。敬请期待更多CSS3技巧的分享！