【HTML+CSS+JS】前端三剑客实现3D旋转照片墙 - 博客

最近大家应该都对3D照片墙很心动吧，赶快拿走给女朋友制作一个，让她知道代码的浪漫

源码如下：

1.把html 文件和img文件放在同级目录下

2.照片格式要注意是否一致哦
<!DOCTYPE html> <html lang="en" ondragstart="return false"> <head> <meta
charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description"
content=""> <title>3D旋转照片墙</title> <style type="text/css"> /* 去掉默认效果 */ * {
margin: 0; padding: 0; } body { background: #222; overflow: hidden; /* 取消选中 */
user-select: none; } @keyframes rotate { 100% { transform: rotateY(360deg); } }
.perspective { /*子元素透视场景深度*/ perspective: 600px; } .wrap { /* 3d */ width:
135px; height: 240px; margin: 100px auto; position: relative; /* border: 1px
solid red; */ 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; /*
webkit */ } /* 照片底座 */ .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; /* 沿着x轴按倒 */ transform:
rotateX(90deg); } </style> </head> <body>  <div
class="perspective"> <div class="wrap" id="imgwrap">  <img
class="f1" src="img/12.png" /> <img class="f1" src="img/13.png" /> <img
class="f1" src="img/14.png" /> <img class="f1" src="img/15.png" /> <img
class="f1" src="img/16.png" /> <img class="f1" src="img/1.png" /> <img
class="f1" src="img/2.png" /> <img class="f1" src="img/3.png" /> <img
class="f1" src="img/4.png" /> <img class="f1" src="img/5.png" /> <img
class="f1" src="img/6.png" /> <img class="f1" src="img/7.png" /> <img
class="f1" src="img/5.png" /> <img class="f1" src="img/6.png" /> <img
class="f1" src="img/7.png" /> <img class="f1" src="img/8.png" /> <img
class="f1" src="img/9.png" /> <img class="f1" src="img/10.png" /> <img
class="f1" src="img/11.png" /> <img class="f1" src="img/17.png" /> <img
class="f1" src="img/18.png" /> <img class="f1" src="img/19.png" /> <img
class="f1" src="img/20.png" /> <img class="f1" src="img/21.png" /> <img
class="f1" src="img/22.png" /> <img class="f1" src="img/23.png" /> <img
class="f1" src="img/24.png" /> <img class="f1" src="img/25.png" /> <img
class="f1" src="img/26.png" /> <img class="f1" src="img/27.png" /> <img
class="f1" src="img/28.png" /> <img class="f1" src="img/29.png" /> <img
class="f1" src="img/30.png" />  <img class="f2" src="img/1.png"
/> <img class="f2" src="img/2.png" /> <img class="f2" src="img/3.png" /> <img
class="f2" src="img/4.png" /> <img class="f2" src="img/5.png" /> <img
class="f2" src="img/9.png" /> <img class="f2" src="img/10.png" /> <img
class="f2" src="img/11.png" /> <img class="f2" src="img/12.png" /> <img
class="f2" src="img/25.png" /> <img class="f2" src="img/26.png" /> <img
class="f2" src="img/27.png" /> <img class="f2" src="img/28.png" /> <img
class="f2" src="img/29.png" /> <img class="f2" src="img/30.png" /> <img
class="f2" src="img/13.png" /> <img class="f2" src="img/14.png" /> <img
class="f2" src="img/15.png" /> <img class="f2" src="img/16.png" /> <img
class="f2" src="img/17.png" /> <img class="f2" src="img/18.png" /> <img
class="f2" src="img/19.png" /> <img class="f2" src="img/20.png" /> <img
class="f2" src="img/21.png" /> <img class="f2" src="img/22.png" /> <img
class="f2" src="img/23.png" /> <img class="f2" src="img/24.png" /> <img
class="f2" src="img/6.png" /> <img class="f2" src="img/7.png" /> <img
class="f2" src="img/5.png" /> <img class="f2" src="img/6.png" /> <img
class="f2" src="img/7.png" /> <img class="f2" src="img/8.png" />  <img class="f3" src="img/1.png" /> <img class="f3" src="img/2.png" /> <img
class="f3" src="img/11.png" /> <img class="f3" src="img/12.png" /> <img
class="f3" src="img/25.png" /> <img class="f3" src="img/26.png" /> <img
class="f3" src="img/27.png" /> <img class="f3" src="img/3.png" /> <img
class="f3" src="img/4.png" /> <img class="f3" src="img/5.png" /> <img
class="f3" src="img/16.png" /> <img class="f3" src="img/17.png" /> <img
class="f3" src="img/18.png" /> <img class="f3" src="img/10.png" /> <img
class="f3" src="img/28.png" /> <img class="f3" src="img/29.png" /> <img
class="f3" src="img/30.png" /> <img class="f3" src="img/13.png" /> <img
class="f3" src="img/19.png" /> <img class="f3" src="img/20.png" /> <img
class="f3" src="img/21.png" /> <img class="f3" src="img/22.png" /> <img
class="f3" src="img/23.png" /> <img class="f3" src="img/24.png" /> <img
class="f3" src="img/9.png" /> <img class="f3" src="img/14.png" /> <img
class="f3" src="img/15.png" /> <img class="f3" src="img/6.png" /> <img
class="f3" src="img/7.png" /> <img class="f3" src="img/5.png" /> <img
class="f3" src="img/6.png" /> <img class="f3" src="img/7.png" /> <img
class="f3" src="img/8.png" /> <p></p> </div> </div> 
<script type="text/javascript"> var oImg =
document.getElementsByClassName('f1') var oImg2 =
document.getElementsByClassName('f2') var oImg3 =
document.getElementsByClassName('f3') var len = oImg.length; console.log(len)
var deg = 360 / len; var oWrap = document.getElementById("imgwrap"); // var
oWrap=document.querySelector('.wrap'); //页面加载完毕在执行的代码 window.onload = function
() { Array.prototype.forEach.call(oImg, function (ele, index, self) { //
旋转并沿Z轴平移 ele.style.transform = "rotateY(" + deg * index + "deg)
translateZ(645.75px)"; //过渡时间1s ele.style.transition = "1s " + (len - index) *
0.1 + "s"; }); Array.prototype.forEach.call(oImg2, function (ele, index, self)
{ // 旋转并沿Z轴平移 ele.style.transform = "rotateY(" + deg * index + "deg)
translateZ(645.75px) translateY(240px)"; //过渡时间1s ele.style.transition = "1s "
+ (len - index) * 0.1 + "s"; }); Array.prototype.forEach.call(oImg3, function
(ele, index, self) { // 旋转并沿Z轴平移 ele.style.transform = "rotateY(" + deg * index
+ "deg) translateZ(645.75px) translateY(480px)"; //过渡时间1s ele.style.transition
= "1s " + (len - index) * 0.1 + "s"; }); // Array.prototype.forEach.call(oImg,
function (ele, index, self) { // // 旋转并沿Z轴平移 // ele.style.transform =
"rotateY(" + deg * index + "deg) translateZ(350px)"; // //过渡时间1s //
ele.style.transition = "1s " + (len - index) * 0.1 + "s"; // }); } //翻动3D相册 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;//清除鼠标移动 } } </script> </body>
</html>
成功了别忘了三连嗷~

技术

Java1212 篇
Python927 篇
开发语言608 篇
c语言463 篇
算法461 篇
MySQL438 篇
数据库394 篇
前端387 篇
更多...