Html
    Css
    Js

    
                        
.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);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

3D自动图片轮播

最好是同一图片切三份效果比较好看,这个轮播只用到了css3的3D效果

0