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