Everyone should be right recently 3D Is the photo wall exciting , Take it away quickly and make one for your girlfriend , Let her know the romance of code
The source code is as follows ：
1. hold html Documents and img Put the file in the same level directory
2. Pay attention to whether the photo format is consistent
<!DOCTYPE html> <html lang="en" ondragstart="return false"> <head> <meta
charset="UTF-8"> <meta name="Keywords" content=""> <meta name="Description"
content=""> <title>3D Rotate photo wall </title> <style type="text/css"> /* Remove the default effect */ * {
margin: 0; padding: 0; } body { background: #222; overflow: hidden; /* Uncheck */
user-select: none; } @keyframes rotate { 100% { transform: rotateY(360deg); } }
.perspective { /* Child element Perspective Scene depth */ 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; /* Absolute positioning */ position: absolute;
width: 100%; height: 100%; transform: rotateY(0deg) translateZ(0px);
background: transparent; box-shadow: 0 0 4px #fff; border-radius: 5px; /*
webkit */ } /* Photo base */ .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; /* along x Shaft press down */ transform:
rotateX(90deg); } </style> </head> <body> <!-- Box container --> <div
class="perspective"> <div class="wrap" id="imgwrap"> <!-- Import picture value page --> <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" /> <!-- Import picture value page --> <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" /> <!-- Import picture value page
--> <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> <!-- src="JS/photo.js" -->
<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'); // Code executing after page loading window.onload = function
() { Array.prototype.forEach.call(oImg, function (ele, index, self) { //
Rotate and along Z Axis translation ele.style.transform = "rotateY(" + deg * index + "deg)
translateZ(645.75px)"; // Transition time 1s ele.style.transition = "1s " + (len - index) *
0.1 + "s"; }); Array.prototype.forEach.call(oImg2, function (ele, index, self)
{ // Rotate and along Z Axis translation ele.style.transform = "rotateY(" + deg * index + "deg)
translateZ(645.75px) translateY(240px)"; // Transition time 1s ele.style.transition = "1s "
+ (len - index) * 0.1 + "s"; }); Array.prototype.forEach.call(oImg3, function
(ele, index, self) { // Rotate and along Z Axis translation ele.style.transform = "rotateY(" + deg * index
+ "deg) translateZ(645.75px) translateY(480px)"; // Transition time 1s ele.style.transition
= "1s " + (len - index) * 0.1 + "s"; }); // Array.prototype.forEach.call(oImg,
function (ele, index, self) { // // Rotate and along Z Axis translation // ele.style.transform =
"rotateY(" + deg * index + "deg) translateZ(350px)"; // // Transition time 1s //
ele.style.transition = "1s " + (len - index) * 0.1 + "s"; // }); } // Flip 3D album var
newX, newY, lastX, lastY, minusX, minusY, rotX = -20, rotY = 0;
document.onmousedown = function (e) { // Click to set the initial value 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) { // Mouse release this.onmousemove = null;// Clear mouse movement } } </script> </body>
</html>
If you succeed, don't forget three times in a row ~
Technology
Daily Recommendation