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

Detailed explanation of Vue development website SEO optimization method

Use CSS to create 3D photo wall effect

Detailed explanation of Vue development website SEO optimization method

SASS Style Programming Guide for CSS

Implementation steps for installing java environment in docker

Jenkins builds Docker images and pushes them to Harbor warehouse

Optimizing query speed of MySQL with tens of millions of data using indexes

How to check whether the ports of the local computer and the remote server are connected under Linux

A brief discussion of 12 classic problems in Angular

Detailed explanation of how NGINX counts the website's PV, UV, and independent IP

Tutorial on disabling and enabling triggers in MySQL [Recommended]

Solution for multiple Docker containers not having the same port number

Recommend

HTML table only displays the outer border of the table

js to achieve image fade-in and fade-out effect

How to use crontab to add scheduled tasks in Linux

Vue implements the product tab of the product details page function

Detailed explanation of MySQL 8.0 password expiration policy

Customize the style of the <input type="file"> element used when uploading files in HTML

How to use HTML 5 drag and drop API in Vue

MySQL permission control detailed explanation

Detailed steps for installing rockerChat in docker and setting up a chat room

Let's talk about destructuring in JS ES6

VMware virtual machine installation CentOS 8 (1905) system tutorial diagram

Solve the problem of inconsistent MySQL storage time

How to implement page jump in Vue project

Tomcat9 download, installation and configuration + detailed tutorial on integrating into eclipse

Detailed explanation of MySQL combined index method