话不多说，直接上源码！！！
index.html
<!--
* @Author: coder-jason
* @Date: 2022-04-20 11:38:07
* @LastEditTime: 2022-04-20 12:27:05
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超火🔥照片墙</title>
<link rel="stylesheet" href="./style.css">
<link rel="icon" type="image/png" href="https://coder-jason.cn/images/favicon-32x32.png">
</head>
<body>
<div class="perspective">
<div class="wrap" id="imgwrap">
<img src="./img/1.jpg" alt="demo">
<img src="./img/2.jpg" alt="demo">
<img src="./img/3.jpg" alt="demo">
<img src="./img/4.jpg" alt="demo">
<img src="./img/5.jpg" alt="demo">
<img src="./img/6.jpg" alt="demo">
<img src="./img/7.jpg" alt="demo">
<img src="./img/8.jpg" alt="demo">
<img src="./img/9.jpg" alt="demo">
<img src="./img/10.jpg" alt="demo">
<img src="./img/11.jpg" alt="demo">
<img src="./img/12.jpg" alt="demo">
<img src="./img/13.jpg" alt="demo">
<img src="./img/14.jpg" alt="demo">
<img src="./img/15.jpg" alt="demo">
<img src="./img/16.jpg" alt="demo">
<img src="./img/17.jpg" alt="demo">
<img src="./img/18.jpg" alt="demo">
<img src="./img/19.jpg" alt="demo">
<img src="./img/20.jpg" alt="demo">
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
style.css
/*
* @Author: coder-jason
* @Date: 2022-04-20 11:38:07
* @LastEditTime: 2022-04-20 12:27:38
*/
* {
margin: 0;
padding: 0;
}
body {
background: #222;
overflow: hidden;
user-select: none;
background-image: url(./img/bgi.png);
}
.perspective {
perspective: 800px;
}
.wrap {
width: 95px;
height: 200px;
margin: 100px auto;
position: relative;
transform: rotateX(-20deg) rotateY(0deg);
transform-style: preserve-3d;
}
.wrap img {
display: block;
position: absolute;
width: 100%;
height: 100%;
transform: rotateY(0deg) translateZ(0px);
background: transparent;
box-shadow: 0 0 4px #fff;
border-radius: 5px;
}
.wrap p {
width: 1200px;
height: 1200px;
background: -webkit-radial-gradient(center center, 600px 600px, rgba(122, 122, 122, .5), rgba(0, 0, 0, 0));
position: absolute;
border-radius: 50%;
left: 50%;
top: 100%;
margin-left: -600px;
margin-top: -600px;
transform: rotateX(90deg);
}
script.js
/*
* @Author: coder-jason
* @Date: 2022-04-20 12:19:54
* @LastEditTime: 2022-04-20 12:25:45
*/
var oImg = document.getElementsByTagName("img")
var len = oImg.length;
console.log(len)
var deg = 360 / len;
var oWrap = document.getElementById("imgwrap");
window.onload = function () {
Array.prototype.forEach.call(oImg, function (ele, index, self) {
ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(350px)";
ele.style.transition = "1s " + (len - index) * 0.1 + "s";
});
}
var newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;
document.onmousedown = function (e) {
lastX = e.clientX;
lastY = e.clientY;
this.onmousemove = function (e) {
newX = e.clientX;
newY = e.clientY;
minusX = newX - lastX;
minusY = newY - lastY;
rotX -= minusY * 0.2;
rotY += minusX * 0.1;
oWrap.style.transform = "rotateX(" + rotX + "deg) rotateY(" + rotY + "deg)";
lastX = newX;
lastY = newY;
}
this.onmouseup = function (e) {
this.onmousemove = null;
}
}
完整项目地址：
