代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D自动图片轮播</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.wrap {
margin:0px auto;
width:800px;
height:400px;
}
.wrap1 {
margin:100px auto;
width:800px;
height:400px;
}
.off5,div,img,.off6,.off7,.off8 {
width:800px;
height:100px;
}
.off5,.off6,.off7,.off8 {
position:relative;
-webkit-transform-style:preserve-3d;
-webkit-transform-perspective:1000;
-webkit--transform-duration:1s;
}
.off5 {
-webkit-animation:a5 10s ease 1s infinite;
}
.off6 {
-webkit-animation:a6 10s ease 1s infinite;
}
.off7 {
-webkit-animation:a7 10s ease 1s infinite;
}
.off8 {
-webkit-animation:a8 10s ease 1s infinite;
}
.off5 div,.off6 div,.off7 div,.off8 div {
position:absolute;
top:0px;
}
.off5 div:nth-child(1),.off6 div:nth-child(1),.off7 div:nth-child(1),.off8 div:nth-child(1) {
-webkit-transform:rotateY(0deg) translateZ(400px);
}
.off5 div:nth-child(2),.off6 div:nth-child(2),.off7 div:nth-child(2),.off8 div:nth-child(2) {
-webkit-transform:rotateY(90deg) translateZ(400px);
}
.off5 div:nth-child(3),.off6 div:nth-child(3),.off7 div:nth-child(3),.off8 div:nth-child(3) {
-webkit-transform:rotateY(180deg) translateZ(400px);
}
.off5 div:nth-child(4),.off6 div:nth-child(4),.off7 div:nth-child(4),.off8 div:nth-child(4) {
-webkit-transform:rotateY(-90deg) translateZ(400px);
}
@-webkit-keyframes a5 {
10% {
-webkit-transform:rotateY(90deg);
}
25% {
-webkit-transform:rotateY(90deg);
}
35% {
-webkit-transform:rotateY(180deg);
}
50% {
-webkit-transform:rotateY(180deg);
}
55% {
-webkit-transform:rotateY(270deg);
}
75% {
-webkit-transform:rotateY(270deg);
}
85% {
-webkit-transform:rotateY(360deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}@-webkit-keyframes a6 {
15% {
-webkit-transform:rotateY(90deg);
}
25% {
-webkit-transform:rotateY(90deg);
}
40% {
-webkit-transform:rotateY(180deg);
}
50% {
-webkit-transform:rotateY(180deg);
}
60% {
-webkit-transform:rotateY(270deg);
}
75% {
-webkit-transform:rotateY(270deg);
}
90% {
-webkit-transform:rotateY(360deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}@-webkit-keyframes a7 {
20% {
-webkit-transform:rotateY(90deg);
}
25% {
-webkit-transform:rotateY(90deg);
}
45% {
-webkit-transform:rotateY(180deg);
}
50% {
-webkit-transform:rotateY(180deg);
}
65% {
-webkit-transform:rotateY(270deg);
}
75% {
-webkit-transform:rotateY(270deg);
}
95% {
-webkit-transform:rotateY(360deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}@-webkit-keyframes a8 {
25% {
-webkit-transform:rotateY(90deg);
}
50% {
-webkit-transform:rotateY(180deg);
}
75% {
-webkit-transform:rotateY(270deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}</style>
</head>
<body>
<div class="wrap">
<div class="wrap2">
<div class="off5">
<div><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
<div><img src="https://cdn.u1.huluxia.com/g3/M01/06/E9/wKgBOV4z87aAJ14UAAB65D5NmoI335.jpg"></div>
<div><img src="http://www.jq22.com/img/cs/500x300-3.png"></div>
</div>
<div class="off6">
<div><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
<div><img src="https://cdn.u1.huluxia.com/g3/M01/06/E9/wKgBOV4z87aAJ14UAAB65D5NmoI335.jpg"></div>
<div><img src="http://www.jq22.com/img/cs/500x300-3.png"></div>
</div>
<div class="off7">
<div><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
<div><img src="https://cdn.u1.huluxia.com/g3/M01/06/E9/wKgBOV4z87aAJ14UAAB65D5NmoI335.jpg"></div>
<div><img src="http://www.jq22.com/img/cs/500x300-3.png"></div>
</div>
<div class="off8">
<div><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
<div><img src="http://www.jq22.com/img/cs/500x300-2.png"></div>
<div><img src="https://cdn.u1.huluxia.com/g3/M01/06/E9/wKgBOV4z87aAJ14UAAB65D5NmoI335.jpg"></div>
</div>
</div></div>
<script>
</script>
</body>
</html>