一.话不多，先看效果：

转念一想，好像很久很久没出css特效的文章了，特别是工作之后，更少了。偶然翻看电脑内存的时候，发现这个自己1年多以前写的特效，甚美，又勾起我一段尘封的回忆。。。我原来也发过3D立体相册特效的，对于基础理念可以看那篇，看完再回来看这篇plus版。实现并不难，如下。
3D立体相册 html+css 的基础版。

效果：
在这里插入图片描述

二.具体实现：

定义div标签：

 <audio src="img/123.mp3" loop autoplay></audio><video class="bg" src="img/11.mp4" autoplay loop muted></video><div class="container"><div class="little"><img src="img/1.jpg" alt="x" /><img src="img/2.jpg" alt="x" /><img src="img/3.jpg" alt="x" /><img src="img/4.jpg" alt="x" /><img src="img/5.jpg" alt="x" /><img src="img/6.jpg" alt="x" /></div><div class="large"><img class="lar1" src="img/1.jpg" alt="x" /><img class="lar2" src="img/2.jpg" alt="x" /><img class="lar3" src="img/3.jpg" alt="x" /><img class="lar4" src="img/4.jpg" alt="x" /><img class="lar5" src="img/5.jpg" alt="x" /><img class="lar6" src="img/6.jpg" alt="x" /></div></div>

其中同级目录img文件夹准备6张图片。audio与video可要可不要，加个背景音乐或背景视频更有情调~

定义基本布局css：

 * {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;}.bg {position: fixed;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}.container {position: relative;width: 100px;height: 100px;perspective: 1000px;transform-style: preserve-3d;}

里层图片盒子css：

 .little {position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;transform: rotateX(12deg) rotateY(-28deg);animation: turn 6s linear infinite;}@keyframes turn {100% {transform: rotateX(12deg) rotateY(-388deg);}}.little img {position: absolute;width: 100%;height: 100%;object-fit: cover;}.little img:nth-child(1) {transform: translateZ(50px);}.little img:nth-child(2) {transform: rotateY(180deg) translateZ(50px);}.little img:nth-child(3) {transform: rotateY(-90deg) translateZ(50px);}.little img:nth-child(4) {transform: rotateY(90deg) translateZ(50px);}.little img:nth-child(5) {transform: rotateX(90deg) translateZ(50px);}.little img:nth-child(6) {transform: rotateX(90deg) translateZ(-50px);}

4.外层图片css：

  .large {position: absolute;top: -50px;left: -50px;width: 200px;height: 200px;transform-style: preserve-3d;transform: rotateX(12deg) rotateY(-28deg);animation: turn2 6s linear infinite;}@keyframes turn2 {100% {transform: rotateX(12deg) rotateY(-388deg);}}.large img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;opacity: 0.2;border: 0.1px solid white;transition: all 1s;}.large img:nth-child(1) {transform: translateZ(100px);}.large img:nth-child(2) {transform: rotateY(180deg) translateZ(100px);}.large img:nth-child(3) {transform: rotateY(-90deg) translateZ(100px);}.large img:nth-child(4) {transform: rotateY(90deg) translateZ(100px);}.large img:nth-child(5) {transform: rotateX(90deg) translateZ(100px);}.large img:nth-child(6) {transform: rotateX(90deg) translateZ(-100px);}

鼠标移入触碰css：

  .container:hover .lar1 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: translateZ(250px);}.container:hover .lar2 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateY(180deg) translateZ(250px);}.container:hover .lar3 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateY(-90deg) translateZ(250px);}.container:hover .lar4 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateY(90deg) translateZ(250px);}.container:hover .lar5 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateX(90deg) translateZ(250px);}.container:hover .lar6 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateX(90deg) translateZ(-250px);}

三.完整代码：

<!--* @Author: your name* @Date: 2021-04-16 19:45:54* @LastEditTime: 2021-04-17 00:12:02* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \undefinedd:\练习\立方体相册\index.html
-->
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;display: flex;justify-content: center;align-items: center;}.bg {position: fixed;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}.container {position: relative;width: 100px;height: 100px;perspective: 1000px;transform-style: preserve-3d;}.little {position: absolute;width: 100%;height: 100%;transform-style: preserve-3d;transform: rotateX(12deg) rotateY(-28deg);animation: turn 6s linear infinite;}@keyframes turn {100% {transform: rotateX(12deg) rotateY(-388deg);}}.little img {position: absolute;width: 100%;height: 100%;object-fit: cover;}.little img:nth-child(1) {transform: translateZ(50px);}.little img:nth-child(2) {transform: rotateY(180deg) translateZ(50px);}.little img:nth-child(3) {transform: rotateY(-90deg) translateZ(50px);}.little img:nth-child(4) {transform: rotateY(90deg) translateZ(50px);}.little img:nth-child(5) {transform: rotateX(90deg) translateZ(50px);}.little img:nth-child(6) {transform: rotateX(90deg) translateZ(-50px);}.large {position: absolute;top: -50px;left: -50px;width: 200px;height: 200px;transform-style: preserve-3d;transform: rotateX(12deg) rotateY(-28deg);animation: turn2 6s linear infinite;}@keyframes turn2 {100% {transform: rotateX(12deg) rotateY(-388deg);}}.large img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;opacity: 0.2;border: 0.1px solid white;transition: all 1s;}.large img:nth-child(1) {transform: translateZ(100px);}.large img:nth-child(2) {transform: rotateY(180deg) translateZ(100px);}.large img:nth-child(3) {transform: rotateY(-90deg) translateZ(100px);}.large img:nth-child(4) {transform: rotateY(90deg) translateZ(100px);}.large img:nth-child(5) {transform: rotateX(90deg) translateZ(100px);}.large img:nth-child(6) {transform: rotateX(90deg) translateZ(-100px);}.container:hover .lar1 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: translateZ(250px);}.container:hover .lar2 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateY(180deg) translateZ(250px);}.container:hover .lar3 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateY(-90deg) translateZ(250px);}.container:hover .lar4 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateY(90deg) translateZ(250px);}.container:hover .lar5 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateX(90deg) translateZ(250px);}.container:hover .lar6 {left: -90px;top: -90px;width: 380px;height: 380px;opacity: 1;transform: rotateX(90deg) translateZ(-250px);}</style></head><body><audio src="img/123.mp3" loop autoplay></audio><video class="bg" src="img/11.mp4" autoplay loop muted></video><div class="container"><div class="little"><img src="img/1.jpg" alt="x" /><img src="img/2.jpg" alt="x" /><img src="img/3.jpg" alt="x" /><img src="img/4.jpg" alt="x" /><img src="img/5.jpg" alt="x" /><img src="img/6.jpg" alt="x" /></div><div class="large"><img class="lar1" src="img/1.jpg" alt="x" /><img class="lar2" src="img/2.jpg" alt="x" /><img class="lar3" src="img/3.jpg" alt="x" /><img class="lar4" src="img/4.jpg" alt="x" /><img class="lar5" src="img/5.jpg" alt="x" /><img class="lar6" src="img/6.jpg" alt="x" /></div></div></body>
</html>

结语：

“逝者如斯夫，不舍昼夜。” 人生世事变化之快。不知疫情何时才能结束。

我的哔哩哔哩空间
Gitee仓库地址：全部特效源码
其它文章：
~关注我看更多简单创意特效：
文字烟雾效果 html+css+js
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等等
进我主页看更多~