一.话不多，先看效果：

转念一想，好像很久很久没出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总结笔记
…等等
进我主页看更多~

3D立体相册不过是冷锋蓝plus版 html+css相关推荐

抖音程序员HTML相册,快手抖音程序员表白女朋友3D立体相册源码html网页相册代码...
前几天分享了一套源码,今天又为大家带来一套类似的源码,希望大家喜欢! 快手抖音很火的程序员女朋友3D立体相册源码html网页相册代码,经测试在IE8浏览器下无法预览,建议使用支持HTML5与css3效 ...
搭载3D立体相册网页加入背景音乐真香！
一.3D立体相册 HTML代码 <!DOCTYPE html> <html lang="en"><head><meta
css3 3D立体相册实现
这几天无聊,看到有博主弄的电子相册有点意思,就照葫芦画瓢也实现了一个,一个半透明的正方体包含着一个小正方体,相册自动旋转,当获得焦点时变化效果,截图如下: 一,代码目录结构二,html代码 < ...
H5 3d立体相册 CSS3特性
CSS3 变形特性,立方相册,3d旋转之前看见过3d效果的立体相册,挺羡慕的,现在自己也有机会实现属于自己的3d立体相册了~~~话不多说,开搞- 一, 准备材料六张自己喜欢的图片,六个面,怎么简单 ...
还在买鲜花送女神？手把手教你搭建3D立体相册网站，包女神稀饭
是不是一款人见人爱的相册网站,看下图演示马上知晓.360度3D立体旋转,随意放大缩小任一张照片,合适每一个女生的小胃口,保证女神眼前一亮,对您刮目相看. 我们的特点是--情人节圣诞节女神生日纪念日都适 ...
抖音3d相册html代码,抖音3D立体相册表白代码.doc
抖音3D立体相册表白浪漫代码首先先建立html文件 css-3d旋转之后再新建一个CSS的文件夹并在css文件夹中建立txt文件,并且把代码复制进去,修改后缀名为.css html{ backg ...
Alternativa3D也可以！3D立体效果（需要红蓝眼镜）
看flare3D之黄河星球demo,提起我的兴趣.故我就用我较熟悉之Alternativa3D实现一下.就用这个方法实现了.贴代码瞧瞧 package {import alternativa.engi ...
创意相册、3D立体相册
3D表白相册精美的3D动态相册,快去做给她吧! 点我下载换的图片格式要一样,实在不一样就去代码里面改后缀名 https://download.csdn.net/download/weixin_43 ...
3D立体相册模板（大小可更改）
这一次代码里面加入了注释,标注了如果要更改大小需要更改的数据,以便大家更好地使用~ <!Doctype html> <html lang="en">< ...

3D立体相册不过是冷锋蓝plus版 html+css

一.话不多，先看效果：

二.具体实现：

三.完整代码：

结语：

3D立体相册不过是冷锋蓝plus版 html+css相关推荐

最新文章

热门文章