<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11111</title>
<style>
*{margin:0;padding:0;list-style:none;}
body{ background:#000;}
#ul1{ position:absolute;left:50%;top:60%; margin-left:-66px; margin-top:-50px;width:50px; height:50px;
transform:perspective(20000px) rotateX(30deg) rotateY(0deg) ; transform-style:preserve-3d;}
#ul1 li{position:absolute;left:0;top:0;width:100%; height:100%; background: red;
transform:rotateY(0deg) translateZ(0px);
transition:1s all ease;
border-radius:10px;
box-shadow:0 0 5px 2px #fff;
overflow:hidden;
font-size: 48px;
}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = oUl.children;
var len = aLi.length;
var speedX = 0;
var speedY = 0;
var lastX = 0;
var lastY = 0;
var i = len - 1;
alert(i);
var timer = setInterval(function(){
aLi[i].style.transform = "rotateY("+360/len*i+"deg) translateZ(300px)";
i--;
if(i < 0){
clearInterval(timer);
}
},0);
var bLeft = bRight = bTop = bBottom = false;
var x = 0;//上下 rotateX
var y = 0;//左右 rotateY
oUl.addEventListener('touchstart',function(ev){
/* ev.preventDefault();*/
var disX = ev.touches[0].clientX - y;
var disY = ev.touches[0].clientY - x;
document.addEventListener("touchmove",defaultEvent,false);
document.addEventListener('touchmove',function(ev){
/* alert('111');*/
y = ev.touches[0].clientX - disX;
x = ev.touches[0].clientY - disY;
if(x >20000){// 60
x = 20000;
} else if(x < -20000) {// -60
x = -20000;
}
oUl.style.transform = "perspective(20000px) rotateX(30deg) rotateY("+y/10+"deg)";
speedX = x - lastX;
speedY = y - lastY;
lastX = x;
lastY = y;
},false)
window.addEventListener('touchend',function(){
document.removeEventListener("touchmove",defaultEvent,false);
document.removeEventListener("touchend",defaultEvent,false);
clearInterval(timer);
},false);
return false;
});
function defaultEvent(ev) {
ev.preventDefault();
}
};
</script>
</head>
<body>
<ul id="ul1">
<li><a style="display: block;" href="http://www.baidu.com">aaa</a></li>
<li><a style="display: block;" href="http://www.baidu.com">bbb</a></li>
<li><a style="display: block;" href="http://www.baidu.com">ccc</a></li>
<li><a style="display: block;" href="http://www.baidu.com">ddd</a></li>
<li><a style="display: block;" href="http://www.baidu.com">eeee</a></li>
<li><a style="display: block;" href="http://www.baidu.com">ff</a></li>
<li><a style="display: block;" href="http://www.baidu.com">ggg</a></li>
<li><a style="display: block;" href="http://www.baidu.com">hh</a></li>
<li><a style="display: block;" href="http://www.baidu.com">ii</a></li>
<li><a style="display: block;" href="http://www.baidu.com">jjj</a></li>
</ul>
</body>
</html>
