效果展示
代码逻辑
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>3D旋转 - 相册</title>
<style type="text/css">
*{
margin:0;padding:0;}
body{
background:#222;
perspective:800px;/*景深*/
}
#wrap{
position:relative;
width:120px;
height:180px;
margin:auto;
transform-style:preserve-3d;/*设置3D环境*/
}
#wrap img{
position:absolute;
width:133px;
height:200px;
box-shadow:0 0 10px #000;
/*倒影:朝向 偏移*/
-webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);
border-radius:5px;/*圆角*/
/* transform:rotateY(0deg) translateZ(0px); */
/*transition:1s 1s;动画执行的时间 动画延迟的时间*/
}
#wrap p{
position:absolute;
left:50%;
top:112%;
margin-left:-600px;
margin-top:-600px;
width:1200px;
height:1200px;
border-radius:50%;
background:-webkit-radial-gradient(center center,600px 600px,rgba(122,122,122,0.2),rgba(0,0,0,0));
transform:rotateX(90deg);
}
</style>
</head>
<body>
<div id="wrap">
<img src="images/1.jpg" alt="" />
<img src="images/2.jpg" alt="" />
<img src="images/3.jpg" alt="" />
<img src="images/4.jpg" alt="" />
<img src="images/5.jpg" alt="" />
<img src="images/6.jpg" alt="" />
<img src="images/7.jpg" alt="" />
<img src="images/8.jpg" alt="" />
<img src="images/9.jpg" alt="" />
<img src="images/10.jpg" alt="" />
<img src="images/11.jpg" alt="" />
<p></p>
</div>
<script type="text/javascript">
var oWrap = document.getElementById("wrap");
var aImg = oWrap.getElementsByTagName("img");
//让盒子自适应的垂直居中
function mTop(){
//获取浏览器窗口可视区域的高度
var H = document.documentElement.clientHeight;
oWrap.style.marginTop = H/2 - 180 + "px"
}
mTop();
window.onresize = mTop;
//图片初始动画
var len = aImg.length;//获取图片的个数
var Deg = 360/len;//每一张图片所占的角度
for (var i=0;i<len;i++ )
{
aImg[i].style.transform = "rotateY("+i*Deg+"deg) translateZ(350px)";
aImg[i].style.transition = "1s "+(len-1-i)*0.1+"s";
}
//鼠标事件(按下 移动 抬起) 拖拽旋转
var lastX,lastY,nowX,nowY,minX,minY,roX=0,roY=0,timer;
document.onmousedown = function(ev){
clearInterval(timer);
var ev = ev||window.event;
//获取鼠标按下去的坐标位置
lastX = ev.clientX;
lastY = ev.clientY;
this.onmousemove = function(ev){
var ev = ev||window.event;
//移动过程中鼠标的坐标位置
nowX = ev.clientX;
nowY = ev.clientY;
//计算出鼠标坐标的差值
minX = nowX - lastX;
minY = nowY - lastY;
//计算容器旋转的角度
roY += minX*0.2;//roY = roY + minX*0.2
roX -= minY*0.1;
//console.log(roX,roY);
//让整个图片容器跟随鼠标动
oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
lastX = nowX;
lastY = nowY;
}
this.onmouseup = function(){
this.onmousemove = null;
this.onmouseup = null;
timer = setInterval(function(){
minX *=0.95;//让minX逐渐减小
minY *=0.95;
roY += minX*0.2;
roX -= minY*0.1;
oWrap.style.transform = "rotateX("+roX+"deg) rotateY("+roY+"deg)";
//当minX达到足够小的值时 清楚定时器
if (Math.abs(minX)<0.1 && Math.abs(minY)<0.1)
{
clearInterval(timer);
}
},1000/60);
}
return false;//阻止默认事件
}
</script>
</body>
</html>