原生js实现3D照片墙

小灰灰 2022-05-21 09:57 230阅读 0赞

聊一下心得：CSS写得好，真的可以省很多js代码哈，写起来也简单很多，所以要好好掌握js哈，所以这里也提供了css代码，如果您觉得您的css写得不错，可以直接看js代码哦

效果：

1、点击Start View进入照片墙

2、只有一张图片是在中间显示，其他图片在中间的图片两侧随机排序，并且随机旋转一定的角度，层级也是随机的哦

3、点击上面的导航条，可以让对应的图片在中间显示

4、点击中间的图片该照片翻转，显示背面（照片的描述信息）

实现过程：

1、用数据生成结构（模拟的数据，此处不再提供）

2、对所有图片进行排序

3、计算两侧图片的随机范围

4、控制图片翻转

5、控制导航按钮切换图片

6、遮罩层动画实现

HTML代码：

<body>
    	<div class="photo_wall">
    		<div class="photo">
    			
    			<div class="photo_i front" id="photo_{
       {id}}">
    				
    				<div class="photo_3d">
    					
    					<div class="photo_side photo_front">
    						<p><img {
       {src}}="{
       {img}}"></p>
    						<h3>{
       {caption}}</h3>
    					</div>
    					
    					<div class="photo_side photo_back">
    						<p class="desc">{
       {desc}}</p>
    					</div>
    				</div>
    			</div>
    			{
       {split}}
    			<div class="nav"><span class="nav_i" id="nav_{
       {id}}"></span></div>
    		</div>
    		<div class="shade">
    			<div class="start">Start View</div>
    		</div>
    	</div>
    </body>

CSS代码：

/*最外层样式*/
    .photo_wall{
    	width: 100%;
    	height: 600px;
    	position: relative;
    	background: url(../imgs/bg.jpg) no-repeat center center;
    	background-size: cover;
    	overflow: hidden;
    }
    
    /*照片区域的样式*/
    .photo {
    	position: absolute;
    	left: 0;
    	top: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 1;
    	opacity: 0;
    	transition: 1s;
    }
    
    /*每个照片的样式*/
    .photo .photo_i,.photo .photo_3d,.photo .photo_side {
    	width: 336px;
    	height: 392px;
    	position: absolute;
    	left: 0;
    	top: 0;
    }
    
    .photo .photo_i {
    	transition: 800ms;
    	perspective: 750px;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%) scale(.5) rotate(0);
    }
    
    .photo .photo_3d {
    	transition: 500ms;
    	transform-style: preserve-3d;
    	transform-origin: 0 50%;
    }
    /*正面和反面的公共样式*/
    .photo .photo_side {
    	border-radius: 6px;
    	background: #fff;
    	padding: 26px 24px;
    	box-sizing: border-box;
    	backface-visibility: hidden;
    }
    
    /*照片的正面样式*/
    .photo .photo_front {
    	transform: rotateY(0);
    }
    .photo .photo_front p {
    	width: 286px;
    	height: 286px;
    	border: 2px solid #d8536d;
    	overflow: hidden;
    	display: flex;
    	/*align-items: center;*/
    }
    .photo .photo_front p img{
    	width: 100%;
    	align-self: center;
    }
    .photo .photo_front h3{
    	width: 166px;
    	height: 44px;
    	background: #d8536d;
    	border-radius: 0 0 6px 6px;
    	margin: 0 auto;
    	text-align: center;
    	font: 16px/44px Arial;
    	color: #fff;
    }
    /*照片的反面样式*/
    .photo .photo_back {
    	transform: rotateY(-180deg);
    }
    
    .photo .photo_back .desc {
    	font-size: 14px;
    	line-height: 20px;
    	color: #d8536d;
    }
    .photo .photo_back a {
    	color: #d8356d;
    }
    /*照片的居中样式*/
    .photo .center {
    	z-index: 9999;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%) scale(1) rotate(0);
    }
    
    /*照片正面的class*/
    .photo .front .photo_3d {
    	transform: translateX(0) rotateY(0);
    }
    /*照片反面的calss*/
    .photo .back .photo_3d {
    	transform: translateX(100%) rotateY(-180deg);
    }
    
    /*导航栏的样式*/
    .nav {
    	position: absolute;
    	left: 0;
    	top: 0;
    	z-index: 888;
    	width: 100%;
    	height: 200px;
    	padding-top: 10px;
    	box-sizing: border-box;
    	text-align: center;
    	background: -webkit-linear-gradient(top,rgba(0,0,0,.5),transparent);
    }
    
    @font-face {
    	font-family: "icont";
    	src: url(../font/iconfont.woff) format("woff");
    }
    
    .nav .nav_i {
    	display: inline-block;
    	width: 30px;
    	height: 30px;
    	border-radius: 50%;
    	background: rgba(255,255,255,.5);
    	font-family: "icont";
    	text-align: center;
    	line-height: 30px;
    	color: rgba(255,255,255,0);
    	cursor: pointer;
    	transform: scale(.5);
    	transition: 500ms;
    }
    
    .nav .active {
    	color: rgba(255,255,255,1);
    	transform: scale(.9) rotateY(0);
    }
    
    .nav .back {
    	transform: scale(.8) rotateY(-180deg);
    }
    
    /*遮罩层*/
    .photo_wall .shade {
    	position: absolute;
    	left: 0;
    	top: 0;
    	z-index: 2;
    	width: 100%;
    	height: 100%;
    	background: rgba(255,255,255,.7);
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }
    .photo_wall .hide {
    	transition: 1s;
    	opacity: 0;
    	transform: scale(0) rotateY(360deg);
    }
    .photo_wall .shade .start {
    	width: 200px;
    	height: 60px;
    	border: 2px solid #d8536d;
    	border-radius: 10px;
    	background: rgba(248,229,227,.5);
    	text-align: center;
    	font: 22px/60px Arial;
    	cursor: pointer;
    }

js代码：用到了我昨天在博客上写的工具函数：[https://blog.csdn.net/lhjuejiang/article/details/80896428][https_blog.csdn.net_lhjuejiang_article_details_80896428]

提供主要的实现步骤的js代码：

[https_blog.csdn.net_lhjuejiang_article_details_80896428]: https://blog.csdn.net/lhjuejiang/article/details/80896428