在css中插入如下针对图片（一个风车）的style代码
img{
animation-name: cartoon; / 定义动画的名字叫“cartoon” /
animation-duration: 10s; / 定义一次动画持续时间/
animation-iteration-count: infinite; / 定义动画循环播放/
animation-timing-function: linear; / 定义动画播放速度相同/
}
@keyframes cartoon{ /对名字叫“cartoon”的动画进行动作 /
from{transform: rotate(0deg);} / 定义动画开始和结束的角度/
to{transform: rotate(-360deg);} / 定义动画旋转的角度*/
}
在body中插入一张图片：<img src="fengche.jpg">
<!-- 下面是一个图片翻转到另一个图片的代码 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
margin: 70px auto;
width: 960px;
border: 1px dashed black;
overflow: hidden;
}
li {
width: 291px;
height: 251px;
float: left;
margin-right:0;
margin-bottom: 40px;
position: relative;
perspective: 230px;
overflow: hidden;
}
li img {
width: 291px;height: 251px;
position: absolute;
left:0px;
top:0px;
-webkit-backface-visibility: hidden;
transition: all 0.5s ease-in 0s;
}
li img.m2{
transform: rotateX(-180deg);
}
ul li:hover img.m2{transform:rotateX(0deg);}
ul li:hover img.m1{transform:rotateX(180deg);}
</style>
</head>
<body>
<ul>
<li>
<img class="m1" src="images/atlas.jpg">
<img class="m2" src="images/coldplay.jpg">
</li>
<li>
<img class="m1" src="images/dont_panic.jpg">
<img class="m2" src="images/coldplay.jpg">
</li>
</ul>
</body>
</html>