5
超火 3D 照片墙，你学废了吗？
source link: https://blog.51cto.com/jasoncoding/5240521
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
👲👲作者主页：🔗 杰森的博客
📒📒本文摘要：用前端的知识实现立体滚动照片墙
💖💖感觉本文还不错的话，还请各位小伙伴👍点赞➕收藏⭐➕评论💭支持杰森呀✌️
话不多说，直接上源码！！！
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;
}
}
完整🔗 项目地址：
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK