图片旋转特效 纯HTML5+CSS3制作图片旋转
transform的四个属性：
①旋转--->rotate(参数a)，单位deg，表示旋转角度，正数顺时针，负数逆时针。
②缩放--->scale(参数a)，单位1，也就是“没有单位”，赤裸裸的0-1之间的数字就行，表示为缩放比例。
③倾斜--->skew(参数a,参数b)，单位deg，两个参数分别表示x,y方向上的倾斜角度，正数顺时针，负数逆时针。
④移动--->translate(参数a)，单位px，移动方向是在div这个平面方向上(这样说起来，应该有点难理解，放在四维坐标中，把div看做是任意一个平面来理解)，也有正数之分，正向前，负向后。
示例图
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#liu{
width:280px;
height: 279px;
background: url(shishi.png) no-repeat;
border-radius:140px;
-webkit-animation:run 6s linear 0s infinite;
}
#liu:hover{
-webkit-animation-play-state:paused;
}
@-webkit-keyframes run{
from{
-webkit-transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div id="liu"></div>
</body>
</html>
1. id为liu的div就是用来展示图片的区域，只不过这里的图片是使用的背景图片，并且通过设置圆角来达到圆形的效果。
2. 代码中关键的部分是怎样使得图片无限转动。 我们可以使用 -webkit-animation 和 @-webkit-keyframes 组合使用来完成。
-webkit-animation 是一个复合属性，定义如下：
-webkit-animation: name duration timing-function delay iteration_count direction;
name: 是 @-webkit-keyframes 中需要指定的方法，用来执行动画。
duration: 动画一个周期执行的时长。
timing-function: 动画执行的效果，可以是线性的，也可以是"快速进入慢速出来"等。
delay: 动画延时执行的时长。
iteration_count: 动画循环执行次数，如果是infinite，则无限执行。
direction: 动画执行方向。
3. @-webkit-keyframes 中的from和to 两个属性，就是指定动画执行的初始值和结束值。
4. -webkit-animation-play-state:paused; 暂停动画的执行。
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱：595397166@qq.com
