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; } }
