教你零基础制作3D盒子相册（送给那个她~）

「爱情、让人受尽委屈。」 2023-07-18 09:27 5阅读 0赞

> 3D立体相册？  
> 　　是的，相信大家或多或少的会在一些地方看到某些程序员用代码给自己女朋友写3D立体相册，那么你会不会也想自己手动敲出那些炫酷的代码呢？  
> 　　那你是找对地方了。废话不多说，今天为大家分享利用html实现3D盒子效果。不用怕，不需要什么软件的，只需要一个电脑和，一只手！

> 2  
> 　　首先先建一个空的文件夹，名字任意。如图  
> 　　　![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1MjY5NQ_size_16_color_FFFFFF_t_70]  
> 2  
> 　　在该文件夹中，再创建一个文件夹，用来存放要使用的图片，同级目录下还需创建两个text文档，注意：需要将文档后缀名改为html和css（由于html是用于web即网页开发的，所以更改文档后缀名后显示的是网站图标。），这点很重要.如图  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1MjY5NQ_size_16_color_FFFFFF_t_70 1]  
> 3  
> 　　将需要使用的图片放入保存图片的文件夹，最好将图片标号1~~6和0106，和一个背景图片，方便写代码时调用（当然，不嫌麻烦也就随便了），其中，16的图修为100x100大小的，01~06的修为400x400大小的。（可以使用网页版美图秀秀——>[传送门][Link 1]）如图  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1MjY5NQ_size_16_color_FFFFFF_t_70 2]

> 4  
> 　　然后在之前创好的html文档，右击编辑，进入编辑页面，复制以下代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D相册盒子版</title> <link type="text/css" href="逼格.css" rel="stylesheet" /> <style type="text/css"> body{ background-image: url("./image/background.png");background-size: 100% 100%;background-attachment: fixed;}
    	</style>
    </head>
    	<body>
    		<div class="box">
    			<ul class="minbox">
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ul>
    			<ol class="maxbox">
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ol>
    		</div>
    	</body>
    </html>

> 5  
> 　　然后在之前创好的css文档(最好也命名为css），右击编辑，进入编辑页面，复制以下代码：

@charset "utf-8";
    *{ 
    	margin:0;
    	padding:0;
    }
    body{ 
    	max-width: 100%;
    	min-width: 100%;
    	height: 100%;
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size:100% 100%;
    	position: absolute;
    	margin-left: auto;
    	margin-right: auto;
    }
    li{ 
    	list-style: none;
    }
    .box{ 
    	width:200px;
    	height:200px;
    	background-size: cover;
    	background-repeat: no-repeat;
    	background-attachment: fixed;
    	background-size:100% 100%;
    	position: absolute;
    	margin-left: 42%;
    	margin-top: 22%;
    	-webkit-transform-style:preserve-3d;
    	-webkit-transform:rotateX(13deg);
    	-webkit-animation:move 5s linear infinite;
    }
    .minbox{ 
    	width:100px;
    	height:100px;
    	position: absolute;
    	left:50px;
    	top:30px;
    	-webkit-transform-style:preserve-3d;
    }
    .minbox li{ 
    	width:100px;
    	height:100px;
    	position: absolute;
    	left:0;
    	top:0;
    }
    .minbox li:nth-child(1){ 
    	background: url(./image/01.jpg) no-repeat 0 0;
    	-webkit-transform:translateZ(50px);
    }
    .minbox li:nth-child(2){ 
    	background: url(./image/02.jpg) no-repeat 0 0;
    	-webkit-transform:rotateX(180deg) translateZ(50px);
    }
    .minbox li:nth-child(3){ 
    	background: url(./image/03.jpg) no-repeat 0 0;
    	-webkit-transform:rotateX(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(4){ 
    	background: url(./image/04.jpg) no-repeat 0 0;
    	-webkit-transform:rotateX(90deg) translateZ(50px);
    }
    .minbox li:nth-child(5){ 
    	background: url(./image/05.jpg) no-repeat 0 0;
    	-webkit-transform:rotateY(-90deg) translateZ(50px);
    }
    .minbox li:nth-child(6){ 
    	background: url(./image/06.jpg) no-repeat 0 0;
    	-webkit-transform:rotateY(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(1){ 
    	background: url(./image/1.jpg) no-repeat 0 0;
    	-webkit-transform:translateZ(50px);
    }
    .maxbox li:nth-child(2){ 
    	background: url(./image/2.jpg) no-repeat 0 0;
    	-webkit-transform:translateZ(50px);
    }
    .maxbox li:nth-child(3){ 
    	background: url(./image/3.jpg) no-repeat 0 0;
    	-webkit-transform:rotateX(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(4){ 
    	background: url(./image/4.jpg) no-repeat 0 0;
    	-webkit-transform:rotateX(90deg) translateZ(50px);
    }
    .maxbox li:nth-child(5){ 
    	background: url(./image/5.jpg) no-repeat 0 0;
    	-webkit-transform:rotateY(-90deg) translateZ(50px);
    }
    .maxbox li:nth-child(6){ 
    	background: url(./image/6.jpg) no-repeat 0 0;
    	-webkit-transform:rotateY(90deg) translateZ(50px);
    }
    .maxbox{ 
    	width: 800px;
    	height: 400px;
    	position: absolute;
    	left: 0;
    	top: -20px;
    	-webkit-transform-style: preserve-3d;
    	
    }
    .maxbox li{ 
    	width: 200px;
    	height: 200px;
    	background: #fff;
    	border:1px solid #ccc;
    	position: absolute;
    	left: 0;
    	top: 0;
    	opacity: 0.2;
    	-webkit-transition:all 1s ease;
    }
    .maxbox li:nth-child(1){ 
    	-webkit-transform:translateZ(100px);
    }
    .maxbox li:nth-child(2){ 
    	-webkit-transform:rotateX(180deg) translateZ(100px);
    }
    .maxbox li:nth-child(3){ 
    	-webkit-transform:rotateX(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(4){ 
    	-webkit-transform:rotateX(90deg) translateZ(100px);
    }
    .maxbox li:nth-child(5){ 
    	-webkit-transform:rotateY(-90deg) translateZ(100px);
    }
    .maxbox li:nth-child(6){ 
    	-webkit-transform:rotateY(90deg) translateZ(100px);
    }
    .box:hover ol li:nth-child(1){ 
    	-webkit-transform:translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -30px;
    }
    .box:hover ol li:nth-child(2){ 
    	-webkit-transform:rotateX(180deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -30px;
    }
    .box:hover ol li:nth-child(3){ 
    	-webkit-transform:rotateX(-90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -100px;
    }
    .box:hover ol li:nth-child(4){ 
    	-webkit-transform:rotateX(90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -30px;
    }
    .box:hover ol li:nth-child(5){ 
    	-webkit-transform:rotateY(-90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -30px;
    }
    .box:hover ol li:nth-child(6){ 
    	-webkit-transform:rotateY(90deg) translateZ(300px);
    	width: 400px;
    	height: 400px;
    	opacity: 0.8;
    	left: -100px;
    	top: -30px;
    }
    @keyframes move{ 
    	0%{ 
    		-webkit-transform: rotateX(13deg) rotateY(0deg);
    	}
    	100%{ 
    		-webkit-transform:rotateX(13deg) rotateY(360deg);
    	}
    }

> 5  
> 　　最后，只需要将代码块的部分修改一下：  
> 　　1.将css代码中的“这个文件夹用来放图片”改为你创建的时候命的名（如：image）。  
> 　　如图  
> 　　![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1MjY5NQ_size_16_color_FFFFFF_t_70_pic_center]  
> 6  
> 　　最后保存退出，然后双击该html即可成功！！！

参考链接：[传送门][Link 2]

> 后言  
> 　　学到这里，还不赶紧去尝试尝试，去给你的那个她来一份惊喜吧！  
> 　　html,css等对于未学习过的人来说就是一潭深水，它的效果可以很强，由于我也只是一个萌新，所以可能并没有别的3D相册炫酷。如果有兴趣的，可以去学习一下！如有问题，欢迎留言~~ 排版不易，喜欢的请点赞分享啊！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1MjY5NQ_size_16_color_FFFFFF_t_70]: /images/20230528/6a499397a99a42b0a7cc03029155d22b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1MjY5NQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/60432d5788244d93b7ef42100d2d4443.png
[Link 1]: https://xiuxiu.web.meitu.com/main.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1MjY5NQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/68dce7c115e74ad8a685a2a98aeefa07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY1MjY5NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/ad1a6853f8414f1281c240b5b5509cd2.png
[Link 2]: https://zhuanlan.zhihu.com/p/94140332