实现3D照片墙效果

wyc_ok
于 2023-09-08 15:32:01 发布
阅读量126
点赞数
分类专栏： JS 文章标签： 3d css3 css
本文链接：https://blog.csdn.net/wu_2004/article/details/132761187
版权
JS 专栏收录该内容
21 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en" ondragstart="return false">

<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>wyc-3D照片墙</title>
	<link rel="shortcut icon" href="程序员头像.ico" type="image/x-icon">
	<link rel="stylesheet" href="./程序员头像.ico">
	<style type="text/css">
		/* 去掉默认效果 */
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #222;
			overflow: hidden;
			/* 取消选中 */
			user-select: none;
		}

		@keyframes rotate {
			100% {
				transform: rotateY(360deg);
			}
		}

		.perspective {
			/*子元素透视 场景深度*/
			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;
			/* 绝对定位 */
			position: absolute;
			width: 100%;
			height: 100%;
			transform: rotateY(0deg) translateZ(0px);
			background: transparent;
			box-shadow: 0 0 4px #fff;
			border-radius: 5px;

			/* webkit */
		}

		/* 照片底座 */
		.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;
			/* 沿着x轴按倒 */
			transform: rotateX(90deg);
		}
	</style>
</head>

<body>
	<!-- 盒子容器 -->
	<div class="perspective">
		<div class="wrap" id="imgwrap">
			<img src="./img/1 .jpg" alt="" class="f1">
			<img src="./img/2 .jpg" alt="" class="f1">
			<img src="./img/3 .jpg" alt="" class="f1">
			<img src="./img/4 .jpg" alt="" class="f1">
			<img src="./img/5 .jpg" alt="" class="f1">
			<img src="./img/6 .jpg" alt="" class="f1">
			<img src="./img/7 .jpg" alt="" class="f1">
			<img src="./img/8 .jpg" alt="" class="f1">
			<img src="./img/9 .jpg" alt="" class="f1">
			<img src="./img/10 .jpg" alt="" class="f1">
			<img src="./img/11 .jpg" alt="" class="f1">
			<img src="./img/12 .jpg" alt="" class="f1">
			<img src="./img/13 .jpg" alt="" class="f1">
			<img src="./img/14 .jpg" alt="" class="f1">
			<img src="./img/15 .jpg" alt="" class="f1">
			<img src="./img/16 .jpg" alt="" class="f1">
			<img src="./img/17 .jpg" alt="" class="f1">
			<img src="./img/18 .jpg" alt="" class="f1">
			<img src="./img/19 .jpg" alt="" class="f1">
			<img src="./img/20 .jpg" alt="" class="f1">
			<img src="./img/21 .jpg" alt="" class="f1">
			<img src="./img/22 .jpg" alt="" class="f1">
			<img src="./img/23 .jpg" alt="" class="f1">
			<img src="./img/24 .jpg" alt="" class="f1">
			<img src="./img/25 .jpg" alt="" class="f1">
			<img src="./img/26 .jpg" alt="" class="f1">
			<img src="./img/27 .jpg" alt="" class="f1">
			<img src="./img/28 .jpg" alt="" class="f1">
			<img src="./img/29 .jpg" alt="" class="f1">
			<img src="./img/30 .jpg" alt="" class="f1">


			<img src="./img/31 .jpg" alt="" class="f2">
			<img src="./img/32 .jpg" alt="" class="f2">
			<img src="./img/33 .jpg" alt="" class="f2">
			<img src="./img/34 .jpg" alt="" class="f2">
			<img src="./img/35 .jpg" alt="" class="f2">
			<img src="./img/36 .jpg" alt="" class="f2">
			<img src="./img/37 .jpg" alt="" class="f2">
			<img src="./img/38 .jpg" alt="" class="f2">
			<img src="./img/39 .jpg" alt="" class="f2">
			<img src="./img/40 .jpg" alt="" class="f2">
			<img src="./img/41 .jpg" alt="" class="f2">
			<img src="./img/42 .jpg" alt="" class="f2">
			<img src="./img/43 .jpg" alt="" class="f2">
			<img src="./img/44 .jpg" alt="" class="f2">
			<img src="./img/45 .jpg" alt="" class="f2">
			<img src="./img/46 .jpg" alt="" class="f2">
			<img src="./img/47 .jpg" alt="" class="f2">
			<img src="./img/48 .jpg" alt="" class="f2">
			<img src="./img/49 .jpg" alt="" class="f2">
			<img src="./img/50 .jpg" alt="" class="f2">
			<img src="./img/51 .jpg" alt="" class="f2">
			<img src="./img/52 .jpg" alt="" class="f2">
			<img src="./img/53 .jpg" alt="" class="f2">
			<img src="./img/54 .jpg" alt="" class="f2">
			<img src="./img/55 .jpg" alt="" class="f2">
			<img src="./img/56 .jpg" alt="" class="f2">
			<img src="./img/57 .jpg" alt="" class="f2">
			<img src="./img/58 .jpg" alt="" class="f2">
			<img src="./img/59 .jpg" alt="" class="f2">
			<img src="./img/60 .jpg" alt="" class="f2">





			<img src="./img/61 .jpg" alt="" class="f3">
			<img src="./img/62 .jpg" alt="" class="f3">
			<img src="./img/63 .jpg" alt="" class="f3">
			<img src="./img/64 .jpg" alt="" class="f3">
			<img src="./img/65 .jpg" alt="" class="f3">
			<img src="./img/66 .jpg" alt="" class="f3">
			<img src="./img/67 .jpg" alt="" class="f3">
			<img src="./img/68 .jpg" alt="" class="f3">
			<img src="./img/69 .jpg" alt="" class="f3">
			<img src="./img/70 .jpg" alt="" class="f3">
			<img src="./img/71 .jpg" alt="" class="f3">
			<img src="./img/72 .jpg" alt="" class="f3">
			<img src="./img/73 .jpg" alt="" class="f3">
			<img src="./img/74 .jpg" alt="" class="f3">
			<img src="./img/75 .jpg" alt="" class="f3">
			<img src="./img/76 .jpg" alt="" class="f3">
			<img src="./img/77 .jpg" alt="" class="f3">
			<img src="./img/78 .jpg" alt="" class="f3">
			<img src="./img/79 .jpg" alt="" class="f3">
			<img src="./img/80 .jpg" alt="" class="f3">
			<img src="./img/81 .jpg" alt="" class="f3">
			<img src="./img/82 .jpg" alt="" class="f3">
			<img src="./img/83 .jpg" alt="" class="f3">
			<img src="./img/84 .jpg" alt="" class="f3">
			<img src="./img/85 .jpg" alt="" class="f3">
			<img src="./img/86 .jpg" alt="" class="f3">
			<img src="./img/87 .jpg" alt="" class="f3">
			<img src="./img/88 .jpg" alt="" class="f3">
			<img src="./img/89 .jpg" alt="" class="f3">
			<img src="./img/90 .jpg" alt="" class="f3">
			<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;
		var deg = 360 / len;

		var oWrap = document.getElementById("imgwrap");
		// var oWrap=document.querySelector('.wrap');

		//页面加载完毕在执行的代码
		window.onload = function () {
			Array.prototype.forEach.call(oImg, function (ele, index, self) {
				// 旋转并沿Z轴平移
				ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px)";
				//过渡时间1s
				ele.style.transition = "1s " + (len - index) * 0.1 + "s";

			});
			Array.prototype.forEach.call(oImg2, function (ele, index, self) {
				// 旋转并沿Z轴平移
				ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(240px)";
				//过渡时间1s
				ele.style.transition = "1s " + (len - index) * 0.1 + "s";

			});
			Array.prototype.forEach.call(oImg3, function (ele, index, self) {
				// 旋转并沿Z轴平移
				ele.style.transform = "rotateY(" + deg * index + "deg) translateZ(645.75px) translateY(480px)";
				//过渡时间1s
				ele.style.transition = "1s " + (len - index) * 0.1 + "s";
			});
		}
		//翻动3D相册
		var newX, newY, lastX, lastY, minusX, minusY, rotX = -20,
			rotY = 0;


		// 定时移动函数
		function timing() {
			return setInterval(() => {
				rotY -= 1 * 0.1;
				oWrap.style.transform = "rotateX(" + rotX + "deg)  rotateY(" + rotY + "deg)";
				lastY = newY;
			}, 10);
		}

		// 开始定时移动
		var setInter = timing();

		// 鼠标摁下时
		document.onmousedown = function (e) {
			// 鼠标按下时需要暂停移动
			clearInterval(setInter)
			clearInterval(this.setInter)

			// 点击设置初值
			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) {
				//鼠标松开
				this.onmousemove = null; //清除鼠标移动
				// 松开时触发定时移动
				this.setInter = timing();
			}
		}
	</script>

	<!-- 调用灯笼挂件 -->
	<script src="https://cdn.jsdelivr.net/gh/fz6m/china-lantern@1.1/dist/china-lantern.min.js"></script>
</body>

</html>
展示效果：
3D照片墙