3D照片墙效果

最新推荐文章于 2024-03-28 12:01:59 发布

尽欢_han

最新推荐文章于 2024-03-28 12:01:59 发布

阅读量189

点赞数

文章标签： 3d

本文链接：https://blog.csdn.net/weixin_71972062/article/details/133522924

版权

大家好，今天我们来做一个好看的3D照片墙效果，这个案例主要运用的是css3的动画效果来实现。

这个哪里主要运用了c3的旋转，通过rotateY（）旋转图片的y轴，改变图片的z轴translateZ()位置来实现图片的3d效果。

为了是照片墙看起来更加立体，我们可以使用transform-style: preserve-3d;属性来给照片墙添加效果，但是单纯加一个preserve-3d属性还是不够的，还要加一个perspective属性，他的作用是让照片墙出现近大远小的效果，值越大效果越明显。

不废话，上代码！！！

<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8" />
	<title>3D旋转相册</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}

		body {
			/* 设置perspective值的大小来控制照片墙的近大远小效果 */
			perspective: 2000px;
		}

		.box {
			width: 200px;
			height: 200px;
			/* 给盒子相对定位 */
			position: relative;
			/* 让盒子居中并让他与上边有一定的距离 */
			margin: 300px auto;
			/* 添加3d效果，使其有空间感 */
			transform-style: preserve-3d;
			/* 设置动画效果，给动画起一个名字，设置旋转动画的时间 ，让动画从头到尾的速度是相同的并让他无限循环播放*/
			animation: go 40s linear infinite;
		}

		/* 设置图片的大小，并给他绝对定位 */
		.box img {
			width: 380px;
			height: 240px;
			position: absolute;
			/* 这里我给了一个样式，让图片出现圆角 */
			border-radius: 30px;
		}

		/* 因为我们的图片很多，一个一个的加class名字太麻烦了，所以我们可以使用选择器来选择图片 */
		.box img:nth-child(1) {
			/* rotateY（）用于旋转图片的y轴，translateZ（）用于设置图片的z轴位置，如果不设置的话会使图片重叠到一起 */
			transform: rotateY(0deg) translateZ(500px);
		}

		.box img:nth-child(2) {
			transform: rotateY(45deg) translateZ(500px);
		}

		.box img:nth-child(3) {
			transform: rotateY(90deg) translateZ(500px);
		}

		.box img:nth-child(4) {
			transform: rotateY(135deg) translateZ(500px);
		}

		.box img:nth-child(5) {
			transform: rotateY(180deg) translateZ(500px);
		}

		.box img:nth-child(6) {
			transform: rotateY(225deg) translateZ(500px);
		}

		.box img:nth-child(7) {
			transform: rotateY(270deg) translateZ(500px);
		}

		.box img:nth-child(8) {
			transform: rotateY(315deg) translateZ(500px);
		}


		@keyframes go {
			0% {
				transform: rotateY(0deg);
			}

			100% {
				transform: rotateY(360deg);
			}
		}
	</style>
</head>

<body>
	<div class="box">
		<img src="./zye_img/1.jpg" />
		<img src="./zye_img/2.jpg" />
		<img src="./zye_img/3.jpg" />
		<img src="./zye_img/4.jpg" />
		<img src="./zye_img/5.jpg" />
		<img src="./zye_img/6.jpg" />
		<img src="./zye_img/7.jpg" />
		<img src="./zye_img/8.jpg" />
	</div>
</body>

</html>

我做的这个可能还有缺陷还请大家指正！

尽欢_han

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3D照片墙效果

属性来给照片墙添加效果，但是单纯加一个preserve-3d属性还是不够的，还要加一个perspective属性，他的作用是让照片墙出现近大远小的效果，值越大效果越明显。这个哪里主要运用了c3的旋转，通过rotateY（）旋转图片的y轴，改变图片的z轴translateZ()位置来实现图片的3d效果。大家好，今天我们来做一个好看的3D照片墙效果，这个案例主要运用的是css3的动画效果来实现。我做的这个可能还有缺陷还请大家指正！
复制链接

扫一扫