css怎么设置图片不停旋转
css设置图片不停旋转的方法：可以通过使用animation属性和transform属性来进行设置，如【-webkit-transform: rotate(360deg);animation: rotation;】。
本教程操作环境：windows10系统、css3版，该方法适用于所有品牌电脑。
（学习视频分享：css视频教程）
css设置图片不停旋转的方法：
相关属性：
animation动画属性
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
属性值：
-
animation-name 指定要绑定到选择器的关键帧的名称
-
animation-duration 动画指定需要多少秒或毫秒完成
-
animation-timing-function 设置动画将如何完成一个周期
-
animation-delay 设置动画在启动前的延迟间隔。
-
animation-iteration-count 定义动画的播放次数。
-
animation-direction 指定是否应该轮流反向播放动画。
-
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
-
animation-play-state 指定动画是否正在运行或已暂停。
-
initial 设置属性为其默认值。
-
inherit 从父元素继承属性。
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
transform: none|transform-functions;
属性值：
-
none 定义不进行转换。
-
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
-
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4×4 矩阵。
-
translate(x,y) 定义 2D 转换。
-
translate3d(x,y,z) 定义 3D 转换。
代码实现：
html代码：
<div class="demo">
<img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>
旋转代码：
.demo{
text-align: center;
margin-top: 100px;
}
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.an{
-webkit-transform: rotate(360deg);
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}
实现效果：
相关推荐：CSS教程
以上就是css怎么设置图片不停旋转的详细内容，更多请关注php中文网其它相关文章！
