3D 旋转可拖拽相册
2020-05-05 本文已影响0人
lessonSam
直接拿走可用，图片路径换下就OK
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<title>css3 旋转 拖拽 相册特效 lesson</title>
<style>
* {
padding: 0;
margin: 0;
}
/* img {
width: 130px;
height: 180px;
} */
body {
background-color: #222;
/* 设置景深 */
perspective: 800px;
}
#wrap {
position: relative;
/* 3d 视觉 */
transform-style: preserve-3d;
width: 120px;
height: 180px;
margin: auto;
}
#wrap img {
position: absolute;
top: 0;
box-shadow: 0 0 10px #000000;
/* 倒影 方向 偏移量 */
-webkit-box-reflect: below 5px -webkit-linear-gradient(top, rgba(
0,
0,
0,
0
)
40%, rgba(0, 0, 0, 0.5));
/* -moz-box-reflect: below 5px -moz-linear-gradient(top, rgba(0, 0, 0, 0)
40%, rgba(0, 0, 0, 0.5)); */
border-radius: 5px;
transform: rotateX(-20deg) translateY(0deg);
/* 旋转过度 */
/* 动画执行的时间 */
transition: 1s 0.5s;
width: 130px;
height: 200px;
}
#wrap p {
position: absolute;
top: 50%;
margin-top: -600px;
margin-left: -600px;
width: 1200px;
height: 1200px;
border-radius: 50%;
transform: rotateX(90deg);
background-color: rgba(122, 122, 122, 0.01);
background: radial-gradient(
center,
center,
600px,
600px,
rgba(122, 122, 122, 0.3),
rgba(122, 122, 122, 0)
);
}
</style>
</head>
<body>
<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="" />
<p></p>
</div>
<script>
let oWrap = document.getElementById('wrap');
let aImg = oWrap.getElementsByTagName('img');
// 获取图片的个数
let len = aImg.length;
// 让盒子自适应的垂直居中
function mTop() {
// 获取浏览器窗口 可视区域的高度
let H = document.documentElement.clientHeight;
// console.log(H);
oWrap.style.marginTop = H / 2 - 180 + 'px';
}
mTop();
// 页面大小发生改变的时候调用 使其可以一直居中
window.onreset = mTop;
// 图片初始循环
for (let i = 0; i < len; i++) {
// 11张图片 的个数均分旋转360度
let Deg = 360 / len;
aImg[i].style.transform =
'rotateY(' + i * Deg + 'deg) translateZ(350px) ';
// 每一个的延迟时间越来越短
aImg[i].style.transition = '1s ' + (len - 1 - i) * 0.1 + 's';
}
var newX,
newY,
lastX,
lastY,
minusX,
minusY,
rotX = -20,
rotY = 0,
a = 10;
// 鼠标（按下 抬起 移动）拖拽旋转
document.onmousedown = function (ev) {
// 事件的兼容
// var ev = ev || window.event;
// 第一次的初始值
lastX = ev.clientX;
lastY = ev.clientY;
console.log(lastX);
this.onmousemove = function (ev) {
// var ev = ev || window.event;
console.log(this);
console.log(lastX);
newX = ev.clientX;
newY = ev.clientY;
minusX = newX - lastX;
minusY = newY - lastY;
rotX -= minusY * 0.025;
rotY += minusX * 0.025; // 插值累加 成为新的旋转度数值
oWrap.style.transform =
'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)';
};
this.onmouseup = function () {
this.onmousemove = null;
// 新值用完之后就变成了 旧的值
lastX = newX;
lastY = newY;
// this.onmouseup = null;
timer = setInterval(function () {
minusX = minusX * 0.95;
minusY = minusY * 0.95;
//
}, 1000 / 60);
};
return false;
};
</script>
</body>
</html>
