Use CSS to create 3D photo wall effect

Use CSS to create a 3D photo wall. The specific code is as follows:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
 <div>
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
  <img src="#"/>
 </div>
 
</body>
</html>

The above code is the preparation. Put a div in the body of the HTML code, which contains the photos you want to display on the photo wall. The number can be arbitrary. Then start writing the style.

body{perspective: 5800px;}

The above code sets a large enough 3D viewing distance for the photo wall, at least enough to accommodate the movement trajectory of all pictures.

img{position:absolute;height:480px;width:320px;}

The above code sets the style for each picture and gives the picture an absolute position so that its position can be controlled arbitrarily. At this time, the pictures will overlap each other. The width and height depend on the specific size of the pictures in the photo wall. Of course, you can also set the size. 320*480 is an example I gave.

img:nth-child(1){transform: translateZ(500px);}
 img:nth-child(2){transform: translateZ(-500px);}
 img:nth-child(3){transform:rotateY(45deg) translateZ(-500px);}
 img:nth-child(4){transform:rotateY(45deg) translateZ(500px);}
 img:nth-child(5){transform:rotateY(-45deg) translateZ(500px);}
 img:nth-child(6){transform:rotateY(-45deg) translateZ(-500px);}
 img:nth-child(7){transform:rotateY(90deg) translateZ(500px);}
 img:nth-child(8){transform:rotateY(90deg) translateZ(-500px);}

The above code sets the style for each picture separately, so that each picture rotates around its own Y axis by a certain angle. The angle depends on how many pictures you put. If there are n pictures, each picture will be rotated 360/n degrees in turn. For example, I put 8 pictures here, so each picture should be rotated 360/8=45 degrees more than the previous picture, layer by layer, such as 0 degrees, 45 degrees, 90 degrees, 135 degrees, 180 degrees, 225 degrees, 270 degrees, 315 degrees, and then each picture is set with a positive (all negative values are also acceptable) equidistant displacement to its own Z axis (the Z axis direction of each picture has changed at this time) to make it spread out. The effect of my writing here is the same. Rotating 45 degrees and displacing - 500px is actually the same as rotating 225 degrees and displacing 500px.

Top view: First rotate itself, then spread in all directions.

You must rotate first to change the direction of the Z axis before moving, otherwise the following will happen:

insert image description here

First shift and then rotate. Since the z-axes of all images are in the initial direction when shifting first, all images will be shifted in the same direction for a distance and still overlap. They will also be squeezed together when rotating again.

then

div{margin:0 auto;margin-top:600px;
transform-style: preserve-3d;
animation:zhuan 6s linear infinite;height:480px;width:320px;}
@keyframes zhuan{
   0%{transform:rotateX(-15deg)rotateY(0);}
   100%{transform: rotateX(-15deg) rotateY(360deg);}
  }

The last step: set the animation effect of rotating the div containing all the pictures around the initial position, that is, rotateY (360deg). Note that the animation should be set for the div, not the picture, otherwise it will become "rotation". The effect we need is "revolution". Set the margin to display it in the middle of the browser for easy observation, set the 3D perspective, and then set the transition time of the animation to 6s (the rotation speed can be changed), and then set infinite to make it loop infinitely. For easy observation, I rotate the entire div around its x-axis by -15 degrees.

Rendering

insert image description here

Summarize

The above is what I introduced to you about using CSS to create a 3D photo wall effect. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: 32 Typical Column/Grid-Based Websites

>>: Introduction to keyword design methods in web design