送给女朋友的3D立体动态相册的实现代码

送给读者的话：

目前在抖音上很火的送给女朋友的3D立体动态相册，现在把代码分享给大家，有兴趣的朋友建议自己重头敲打一遍，这样才会理解的更加透彻。哈哈，先上效果图，吸引起你们的兴趣！

接下来就进入正题了！前方高能，注意别眨眼，哈哈！

制作过程

一、新建一个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(../img/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.png) 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: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.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: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

二、新建一个html文件，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title>
<link type="xiao/css" href="css/style.css" rel="stylesheet" />
</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>

三、文件目录的结构

把css文件放到css文件夹中，图片放到img文件夹中

四、图片尺寸的修改

打开美图秀秀进行图片尺寸修改

五、图片的尺寸及摆放

如上图所示：
01-06编号命名的图片尺寸是100x100px的大小的，1-6编号是400x400px大小的
01-06是小正方体的图片，1-6是大正方体的图片
第3张和第4张注意要头朝下

六、动态效果

以上就是3D立体动态相册的实现过程，学会的兄弟们赶快去手动制作吧，让你的那个她感受到你的浪漫

---

2020-4-2更新

去年就将更新版的3D相册写了出来，但是由于毕设相关事宜忘了将更新版放到博客上面，现在应兄弟们的要求，将更新版的相册发布出来。
哈哈，话不多说，先上图

更新内容：
1.添加了相关背景音乐，使得相册体验感更好
2.添加了相关背景图片，使得相册的美感更佳
3.解决了相关路径存放问题，使得相册可以放在任何文件夹中使用，兼容性更高
4.新版相册可直接作为系统桌面，带给你不一样的体验

具体操作方法

1.图片

图片选取与设计参考前面的教程，将所有图片按照相应的尺寸设计好之后放入img文件夹即可

2.背景音乐

自己在网上下载相关歌曲的mp3文件，下载好之后修改文件名为tt然后放入解压之后的3D相册文件夹中替换文件夹中相同的文件即可

3.背景图片

自己在网上下载相关的图片文件，下载好之后修改文件名为pp然后放入解压之后的3D相册文件夹中替换文件夹中相同的文件即可（注：此处的图片分辨率最好为1080p，这样效果会更好）

4.系统桌面

在Steam上下载wallpaper engine软件，使用此软件可以将上面的动态相册变为系统桌面（注：此处不是为Steam打广告，主要是博主个人感觉这款软件真心不错，推荐大家去使用）

注：代码不用修改，本人已全部写好，只需按照上述步骤修改相关图片、音乐即可，对新手非常友好，最后祝愿广大兄弟们都能成功告别单身！

本次更新资源我会放在博客结尾处，需要的兄弟可自行加载

本篇博客主要是自己的兴趣使然，希望可以帮助广大朋友成功撩到自己的女神，明白编程的乐趣。
此篇博客中若有错误，欢迎大家指正交流！！！

福利：我会将此代码文件放到我的资源中，需要的兄弟可自行下载，但笔者还是希望兄弟们可以自己重头编写一遍，这样理解也会更深一些。

文件资源下载链接：
送给女朋友的3D立体动态相册
送给女朋友的3D相册更新版