HTML
<!doctype html>
<head>
<meta charset="utf-8">
<title>纯CSS3模拟风车转动效果</title>
<link rel="stylesheet" href="css/lanren.css">
</head>
<body>
<!-- 代码部分begin -->
<div class="lanren">
<ul>
<li><img src="images/main5-pic1.png"> </li>
<li><img src="images/main5-pic2.png"> </li>
<li><img src="images/main5-pic3.png"> </li>
</ul>
</div>
<!-- 代码部分end -->
</body>
</html>
CSS
.lanren {
-webkit-transition: All 1s 0s;
-moz-transition: All 1s 0s;
-ms-transition: All 1s 0s;
margin-top: 200px;
}
.lanren ul {
margin: 0;
padding: 0;
-webkit-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-moz-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-ms-transform: translateX(0px) translateY(0px) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
.lanren ul li {
list-style: none;
position: absolute;
width: 530px;
height: 530px;
left: 45%;
top: 100%;
margin-left: -200px;
margin-top: -100px;
}
.lanren li img {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.lanren ul li:nth-of-type(1) {
-webkit-transition: All 1.2s 0s;
-moz-transition: All 1.2s 0s;
-ms-transition: All 1.2s 0s;
transition: All 1.2s 0s;
-webkit-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-moz-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-ms-transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(0) translateZ(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
.lanren ul li:nth-of-type(1) img {
-webkit-animation: z 5s linear 0s infinite;
-moz-animation: z 5s linear 0s infinite;
-ms-animation: z 5s linear 0s infinite;
animation: z 5s linear 0s infinite;
}
.lanren ul li:nth-of-type(2) {
-webkit-animation: y 20s linear 0s infinite;
-moz-animation: y 20s linear 0s infinite;
-ms-animation: y 20s linear 0s infinite;
animation: y 20s linear 0s infinite;
}
.lanren ul li:nth-of-type(3) {
-webkit-animation: z 10s linear 0s infinite;
-moz-animation: z 10s linear 0s infinite;
-ms-animation: z 10s linear 0s infinite;
animation: z 10s linear 0s infinite;
}
@-webkit-keyframes z {
from {
-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1);
}
to {
-webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
-moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
-ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scaleX(1) scaleY(1) scaleZ(1);
}
}
@-webkit-keyframes y {
from { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1) scaleZ(1); }
to { -webkit-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1); -moz-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1); -ms-transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1); transform: translateX(0) translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(-360deg) scaleX(1) scaleY(1) scaleZ(1); }
}
用到的图片
 |
 |
 |
效果
