纯HTML加CSS实现3D立体动态相册【超简单、附源码】

Bertha 。 2023-07-22 09:19 2阅读 0赞

近日，收到一男粉丝私信，具体如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]  
`PS`：在跟他聊天过程中，我不该笑的，哪个男同胞没有这么让人心疼的一刻呢。所以，在此祝愿他能早日哄好他的女朋友，加油，奥利给~~~

--------------------

于是，在他的万般焦急等待下，为他量身定做的动态相册出炉了，鉴于时间紧任务重，实现的功能比较单一，但是他已经很满足了，我也很欣慰！

先来看一下效果：  
![在这里插入图片描述][2020040513304718.gif_pic_center]  
具体代码如下：

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>加油</title>
    	<style type="text/css">
    		*{ margin: 0;padding: 0;}
    		
    		.wrap{ width: 600px;height: 400px;margin: 200px auto;}
    		.box{ width: 200px;height: 200px;margin: 100px auto;position: relative;transition: all 3s;transform-style: preserve-3d;animation: move 3s infinite linear alternate;}
    		.box>div{ width: 200px;height: 200px;font-size: 60px;opacity: .5;position: absolute;top: 0;left: 0;transition: all 1s;}
    		
    		.box img{ width: 200px;height: 200px;}
    		
    		.left{ transform: rotateY(90deg) translateZ(-100px);}
    		.right{ transform: rotateY(90deg) translateZ(100px);}
    		.top{ transform: rotateX(90deg) translateZ(100px);}
    		.bottom{ transform: rotateX(90deg) translateZ(-100px);}
    		.after{ transform: translateZ(-100px);}
    		.before{ transform: translateZ(100px);}
    		
    		.wrap .box:hover .left{ transform: rotateY(90deg) translateZ(-160px);}
    		.wrap .box:hover .right{ transform: rotateY(90deg) translateZ(160px);}
    		.wrap .box:hover .top{ transform: rotateX(90deg) translateZ(160px);}
    		.wrap .box:hover .bottom{ transform: rotateX(90deg) translateZ(-160px);}
    		.wrap .box:hover .after{ transform: translateZ(-160px);}
    		.wrap .box:hover .before{ transform: translateZ(160px);}
    		
    		@keyframes move{ 
    			from{ transform: rotateX(0deg) rotateY(0deg);}
    			to{ transform: rotateX(13deg) rotateY(720deg);}
    		}
    	</style>
    </head>
    <body>
    	<div class="wrap">
    		<div class="box">
    			<div class="left"><img src="img/01.jpg" alt=""></div>
    			<div class="right"><img src="img/02.jpg" alt=""></div>
    			<div class="top"><img src="img/03.jpg" alt=""></div>
    			<div class="bottom"><img src="img/04.jpg" alt=""></div>
    			<div class="after"><img src="img/05.jpg" alt=""></div>
    			<div class="before"><img src="img/06.jpg" alt=""></div>
    		</div>
    	</div>
    </body>
    </html>

为了防止他运行不出来，我把整个HTML文件发给了他，并告知只需把图片换成他女朋友的照片就好咯~

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 2]  
结果当然是运行出来了，女朋友也原谅他了，紧接着…走上了人生巅峰~~~

![在这里插入图片描述][20200405134342880.jpg_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200405132246512.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 1]: /images/20230528/4ba2a350acf04735b754c8dd88a4f5d4.png
[2020040513304718.gif_pic_center]: /images/20230528/6885b8df738c4ef497363f46f6402540.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70 2]: /images/20230528/d00556d859fe42c5b6a8b77bb28aa038.png
[20200405134342880.jpg_pic_center]: /images/20230528/14aa24a2245645c5b738e4ef64f40019.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg4MTc2OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/30da39b32cf64b87878ea234d838e64d.png