Use css to create 3D photo wall

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/uiguiytuy/article/details/102763968

Use css to create 3D photo wall

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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 ready to work, I put a div in the html code of the main body, wrapped inside you want to display photo in the photo on the wall can be any number. Then start the handwriting style.

	body{perspective: 5800px;}

The above code is to set up a photo wall large enough 3D viewing distance, at least trajectory can only put all the pictures.

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

This code pattern is set to each picture, a picture to absolute positioning, it can be arbitrarily controlled position where the images will overlap, depending on the particular dimensions of width and height of the image in the photo wall, of course, you You can set the size of 320 * 480 is an example I cited.

	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);}

This code is set individually for each picture pattern, so that each picture angle of rotation about its own axis Y, the angle depends on how many pictures you put, n-Photo, each picture is sequentially rotated 360 / n degrees, for example here I put FIG. 8, each figure should then turn the multi-rotation 360/8 = 45 ° than the previous image, progressive layers, such as 0 degrees, 45 degrees, 90 degrees, 135 degrees, 180 degrees, 225 degrees, 270 degrees, 315 degrees, and then to each image so that its Z-axis (Z-axis direction at this time for each image have changed) are set to a positive (negative may be full) equidistant displacement to make it spread, the effect of my writing here too, rotated 45 degrees displacement - 500px actually rotate 225 degrees and 500px displacement effect is the same.

FIG plan: First rotates itself again diffused in all directions.
Must first rotation, the Z axis direction so that their displacement changes again, otherwise the following happens:
Here Insert Picture Description
first displaced after rotation, due to the displacement of all the images are to the initial direction of the z-axis, such that all images will be displaced with a distance, still stacked together, it will be crowded together and then rotated.

Adhesive

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 final step: to all the pictures div wrapped around the initial set position of the rotation animation that is rotateY (360deg), to note here is to animate the div, not to the picture, otherwise it will become a "rotation", we need the effect is "revolution", it is provided in the middle margin browser display, easy viewing perspective provided 3d, then the transition time is provided to the animation 6S (rotation speed, can be changed), then set it infinite infinite loop, in order to facilitate the observation I div entire rotating -15 degrees about its x axis.

FIG effect
Here Insert Picture Description
the END
of THANK YOU the FOR WATCHING

Use css to create 3D photo wall

Use css to create 3D photo wall

Guess you like