马上就要七夕了，学编程的你没有什么拿得出手的礼物吗？不如用我们所学知识来做个简单的 3D 立体表白相册吧！（特效绝对杠杠的）
希望大家（以及大家的那一位）喜欢!
效果截图如下：（笔者不像在座的各位，老婆还是很多的，所以......）
代码如下：
index.html文件代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3D立体动态相册</title><style>*{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);}}</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>注意,图片的话
效果想展示最佳就按推荐的尺寸来,图片格式是png格式
01-06编号命名的图片尺寸是 100x100px的大小的，1-6编号是400x400px
大家可以自制图片，如果各位看官大大比较懒，又想提升一下自己各方面的编程能力，可以来笔者的C语言学习群奥！（既可以获取图片素材又可以领取免费学习资料学习C/C++）预祝大家早日脱单！
对于准备学习编程的小伙伴，如果你想更好的提升你的编程核心能力（内功）不妨从现在开始！
C语言C++编程学习交流圈子，QQ群：614504899【点击进入】微信公众号：C语言编程学习基地
整理分享（多年学习的源码、项目实战视频、项目笔记，基础入门教程）
欢迎转行和学习编程的伙伴，利用更多的资料学习成长比自己琢磨更快哦！
