<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<style>
*{
margin:0;
padding: 0;
}
.demo{
width:500px;
height:500px;
margin:50px;
overflow: hidden;
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
display: inline-block;
}
.block{
color:white;
position: relative;
font-size: 450px;
text-align: center;
line-height: 500px;
-webkit-transform-style: preserve-3d;
float:left;
}
.block li{
list-style-type: none;
width:500px;
height:500px;
background:#000;
position: absolute;
top:0;
left:0;
-webkit-transition:-webkit-transform 0.5s linear;
-webkit-transform:rotate3d(1,0,0,90deg);
-webkit-transform-origin:bottom;
}
.block .l1{
-webkit-transform:rotate3d(1,0,0,0deg);
}
.block2{
-webkit-transform-style: preserve-3d;
position: relative;
-webkit-animation:totate 13s linear infinite;
top:50%;
left:50%;
margin:-150px 0 0 -150px;
width: 300px;
height:300px;
}
@-webkit-keyframes totate{
0%{
-webkit-transform:rotateX(0) rotateY(360deg) rotateZ(180deg) translate3d(0,0,150px);
}
100%{
-webkit-transform:rotateX(360deg) rotateY(0deg) rotateZ(360deg) translate3d(0,0,150px);
}
}
.block2 li{
color:white;
width:300px;
height:300px;
font-size: 250px;
text-align: center;
line-height: 300px;
background:rgba(0,0,0,0.3);
position: absolute;
top:0;
list-style-type: none;
}
.l5{
left:0;
}
.l6{
-webkit-transform:translate3d(150px,0,-150px) rotate3d(0,1,0,90deg);
}
.l7{
-webkit-transform:translate3d(0,0,-300px) rotate3d(0,1,0,180deg);
}
.l8{
-webkit-transform:translate3d(-150px,0,-150px) rotate3d(0,1,0,270deg);
}
.l9{
-webkit-transform:translate3d(0,0,0) rotate3d(1,0,0,-90deg);
-webkit-transform-origin:top;
}
.l10{
-webkit-transform:translate3d(0,0,0) rotate3d(1,0,0,90deg);
-webkit-transform-origin:bottom;
}
</style>
</head>
<body>
<div class="demo">
<ul class="block">
<li class="l1">1</li>
<li class="l2">2</li>
<li class="l3">3</li>
<li class="l4">4</li>
</ul>
</div>
<div class="demo" class="demo2">
<ul class="block2">
<li class="l5">1</li>
<li class="l6">2</li>
<li class="l7">3</li>
<li class="l8">4</li>
<li class="l9">5</li>
<li class="l10">6</li>
</ul>
</div>
<button id="next">next</button>
<button id="prev">prev</button>
</body>
<script>
!(function(win,doc){
var i=1;
next.onclick=function(){
if(i>3)return;
var oli=doc.querySelector(".l"+i),
olinext=doc.querySelector(".l"+(i+1));
oli.style.webkitTransform="rotate3d(1,0,0,"+(-90)+"deg)";
olinext.style.webkitTransform="rotate3d(1,0,0,"+(0)+"deg)";
i++;
}
prev.onclick=function(){
if(i<2)return;
var oli=doc.querySelector(".l"+i),
olinext=doc.querySelector(".l"+(i-1));
oli.style.webkitTransform="rotate3d(1,0,0,"+(90)+"deg)";
olinext.style.webkitTransform="rotate3d(1,0,0,"+(0)+"deg)";
i--;
}
})(window,document)
</script>
</html>