3D旋转相册

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转相册</title>
<meta name="keywords" content=""> 
<meta name="description" content=""> 
<style>
* {
margin: 0;
}
body {
background: #000;
}
#perspective {
perspective: 800px; /*场景深度*/
}
#wrap {
position: relative;
width: 120px;
height: 180px;
margin: 100px auto;
/*border: 1px solid #F00;*/
transform-style: preserve-3d;
transform: rotateX(-20deg) ;
}
img {
width: 100%;
position: absolute;
box-shadow:0 0 30px red;
-webkit-box-reflect: below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%);
/*-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));*/
}
</style>
</head>
<body ondragstart="return false;" oncontextmenu="return false;">
<div id="perspective">
<div id="wrap">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
<img src="img/7.jpg" alt="">
<img src="img/8.jpg" alt="">
<img src="img/9.jpg" alt="">
<img src="img/10.jpg" alt="">
<img src="img/11.jpg" alt="">
</div>
</div>
</body>
<script>
var oImg = document.getElementsByTagName('img');
var deg = 360/oImg.length; //圆的单位度数
window.onload = function() {
[].map.call(oImg,function(arg1, arg2) {
// console.log(arg1,arg2);
arg1.style.boxReflect = 'below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,.5) 100%)';
arg1.style.transform = 'rotateY(' + arg2*deg + 'deg) translateZ(300px)';
arg1.style.transition = '1s ' +(oImg.length - arg2)*0.2 + 's';
})
}

//拖拽
var newX,newY,pervX,pervY,minusX,minusY,rotX = -20,rotY = 0;
var oWrap = document.getElementById('wrap');
//点击事件
document.onmousedown = function(e) {
pervX = e.clientX;
pervY = e.clientY;
// console.log(e)
//移动事件
this.onmousemove = function(e) {
// console.log(22)
newX = e.clientX;
newY = e.clientY;

//差值
minusX = newX - pervX;
minusY = newY - pervY;

//转换为度数给相册
rotX -= minusY * 0.1;
rotY += minusX * 0.2;
oWrap.style.transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';

pervX = newX;
pervY = newY;
}
//松开事件
this.onmouseup = function(e) {
//禁止移动事件
this.onmousemove = null;
// console.log(111)
}
}
</script>
</html>

猜你喜欢