【前端领域】3D旋转超美相册（HTML+CSS）
世界上总有一半人不理解另一半人的快乐。
——《爱玛》
目录
一、前言
二、本期作品介绍
3D旋转相册
三、效果展示
四、详细介绍
五、编码实现
index.html
style.css
img
六、获取源码
公众号获取源码
获取源码？私信？关注？点赞？收藏？
一、前言
新的一年，我们是是否需要一个新的相册呢？答案：是的。
2023年，已经过去了一个半月的时间，我们已经在2023年，经历了大大小小很多的事情，不知道那些事情值得你记忆呢？你是否还记得呢？
今天，为大家推荐的是一款好看的3D旋转相册，用来记录2023年的美好时刻，一个不算新颖但很有创意的作品，记录美好生活，设计相册效果等。都是很值得使用的。
最近，迎来新的一个学期的开始，不知道你是否已经准备好迎接新的学期？身边的朋友都陆陆续续的开学了，我们也快了，新的学期，新的一年，你有什么目标呢？准备好实现了吗？在此，也祝大家在新的一学期，迎来新的超越，达到新的目标，实现新的理想，不断超越自己。
二、本期作品介绍
3D旋转相册
本文是一篇简单的前端代码，主要内容仅包含 HTML，CSS 等内容 主要为 CSS
1、HTML代码
2、CSS样式
3、插件等
4、旋转特效
5、图片
6、鼠标放置效果
7、可添加背景音乐，背景图等
8、添加文字介绍
三、效果展示
让我们一起，欣赏吧！！！
A.正常打开效果
B.鼠标放置
C.添加图片
注意哦！！！
可以在此基础上添加背景音乐，点击特效，背景图等
特别提醒一下大家，注意图片像素（尺寸），否则会显示不出来的/(ㄒoㄒ)/~~
四、详细介绍
第一点： 3D旋转相册，顾名思义
第二点： 可以自由添加背景音乐，背景图等
第三点： 可以用在多种情景，普通相册展示，介绍等
五、编码实现
显示完整代码
注意路径(⊙o⊙)？
o(*￣▽￣*)ブ
(ง •_•)ง
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enovo3D相册</title><link type="text/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>style.css
@charset "utf-8";
*{margin:0;padding:0;
}
body{/*background: url(../img/preview.png) ;*/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);}
}
img
一定注意image文件的路径噢！！！
六、获取源码
老规矩，先给朋友们看一下完整文件夹，
正确的文件如下图 ，复制源码的朋友们请注意了！！！
公众号获取源码
第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式（复制源码请注意路径及文件名）
第二步，点击 html 文件 打开即可查看
2023年第十八期，希望得到大家的喜欢🙇
希望大家有好的意见或者建议，欢迎私信，一起讨论(⊙o⊙)？做出更改。
是否精彩呢？如果有好的建议或者想法可以联系我，一起交流🙇
以上就是本篇文章的全部内容了
~ 关注我，点赞博文~ 每天带你涨知识!
1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C++、数据结构、Python程序设计、Java程序设计、爬虫等！ 「在这里有好多 开发者，一起探讨 前端 开发 知识，互相学习」！
3.以上内容技术相关问题可以相互学习，可 关 注 ↓公 Z 号 获取更多源码 !
获取源码？私信？关注？点赞？收藏？
👍+✏️+⭐️+🙇
有需要源码的小伙伴可以 关注下方微信公众号 " Enovo开发工厂 "，回复 关键词 " 1-3D相册 "
相关文章：
【前端领域】3D旋转超美相册（HTML+CSS）
世界上总有一半人不理解另一半人的快乐。 ——《爱玛》 目录 一、前言 二、本期作品介绍 3D旋转相册 三、效果展示 四、详细介绍 五、编码实现 index.html style.css img 六、获取源码 公众号获取源码 获取源码？私信？关注？点赞&…...
Java——聊聊JUC中的原子变量类
文章目录： 1.什么是原子变量类？ 2.AtomicInteger（基本类型原子变量类） 3.AtomicIntegerArray（数组类型原子变量类） 4.AtomicMarkableReference（引用类型原子变量类） 5.AtomicInteger…...
elasticsearch索引与搜索初步
ES支持cURL交互，使用http请求完成索引和搜索操作，最基本的格式如下：创建索引我们可以使用PUT方法创建索引，通过指定“索引”、“类型”、“文档ID”锁定文档，通过参数指定文档的数据。红色部分的路由分别指定了“索引”…...
【Python】多线程与多进程学习笔记
本文是一篇学习笔记，学习内容主要来源于莫凡python的文档：https://mofanpy.com/tutorials/python-basic/threading/thread 多线程 线程基本结构 开启子线程的简单方式如下： import threadingdef thread_job():print(This is a thread of %…...
MySQL基础知识点
1.在Linux上安装好MySQL8.0之后，默认数据目录的具体位置是什么？该目录下都保存哪些数据库组件？在目录/usr/sbin、/usr/bin、/etc、/var/log 分别保存哪些组件？ 答：默认数据目录：/var/lib/mysql。保存有mysq…...
代码随想录算法训练营第五十九天| 583. 两个字符串的删除操作、72. 编辑距离
Leetcode - 583dp[i][j]代表以i-1结尾的words1的子串 要变成以j-1结尾的words2的子串所需要的次数。初始化： "" 变成"" 所需0次 dp[0][0] 0, ""变成words2的子串 需要子串的长度的次数,所以dp[0][j] j, 同理，dp[i][0] …...
指针引用字符串问题（详解）
通过指针引用字符串可以更加方便灵活的使用字符串。 字符串的引用方式有两种，下面简单介绍一下这两种方法。 1.用字符数组来存放一个字符串。 1.1 可以通过数组名和下标来引用字符串中的一个字符。 1.2 还可以通过数组名和格式声明符%s输出整个字符串。 具体实…...
数据结构——哈夫曼树编程，输入权值实现流程图代码
一、须知 本代码是在数据结构——哈夫曼树编程上建立的，使用时需将代码剪切到C等软件中。需要输入权值方可实现流程图，但是还需要按照编程换算出的结果自己用笔画出流程图。 下面将代码粘贴到文章中，同时举一个例子：二、代…...
【MySQL】 事务
😊😊作者简介😊😊 ： 大家好，我是南瓜籽，一个在校大二学生，我将会持续分享Java相关知识。 🎉🎉个人主页🎉🎉 ： 南瓜籽的主页…...
Java测试——selenium常见操作（2）
这篇博客继续讲解一些selenium的常见操作 selenium的下载与准备工作请看之前的博客：Java测试——selenium的安装与使用教程 先创建驱动 ChromeDriver driver new ChromeDriver();等待操作 我们上一篇博客讲到，有些时候代码执行过快，页面…...
【三维点云】01-激光雷达原理与应用
文章目录内容概要1 激光雷达原理1.1 什么是激光雷达？1.2 激光雷达原理1.3 激光雷达分类三角法TOF法脉冲间隔测量法幅度调制的相位测量法相干法激光雷达用途2 激光雷达安装、标定与同步2.1 激光雷达安装方式考虑因素2.2 激光雷达点云用途2.3 数据融合多激光雷达数据融…...
自动驾驶感知——物体检测与跟踪算法|4D毫米波雷达
文章目录1. 物体检测与跟踪算法1.1 DBSCAN1.2 卡尔曼滤波2. 毫米波雷达公开数据库的未来发展方向3. 4D毫米波雷达特点及发展趋势3.1 4D毫米波雷达特点3.1.1 FMCW雷达角度分辨率3.1.2 MIMO ( Multiple Input Multiple Output)技术3.2 4D毫米波雷达发展趋势3.2.1 芯片级联3.2.2 专…...
C语言（内联函数（C99）和_Noreturn）
1.内联函数 通常，函数调用都有一定的开销，因为函数的调用过程包含建立调用，传递参数，跳转到函数代码并返回。而使用宏是代码内联，可以避开这样的开销。 内联函数：使用内联diamagnetic代替函数调用。把函数…...
理解与tensorflow2.0 代码实现 附完整代码)
图卷积神经网络(GCN)理解与tensorflow2.0 代码实现 附完整代码
图(Graph)，一般用 $G=(V,E)$ 表示，这里的$V$是图中节点的集合，$E$ 为边的集合，节点的个数用$N$表示。在一个图中，有三个比较重要的矩阵： 特征矩阵$X$：维度为 $N\times D$ ，表示图中有 N 个节点，每个节点的特征个数是 D。邻居矩阵$A$：维度为 $N\times N$ ，表示图中 N…...
模电学习6. 常用的三极管放大电路
模电学习6. 常用的三极管放大电路一、判断三极管的工作状态1. 正偏与反偏的概念2. 工作状态的简单判断二、三种重要的放大电路1. 共射电路2. 共集电极放大电路3. 共基极放大电路一、判断三极管的工作状态 1. 正偏与反偏的概念 晶体管分P区和N区， 当P区电压大于N区…...
Lesson 6.6 多分类评估指标的 macro 和 weighted 过程 Lesson 6.7 GridSearchCV 的进阶使用方法
文章目录一、多分类评估指标的 macro 和 weighted 过程1. 多分类 F1-Score 评估指标2. 多分类 ROC-AUC 评估指标二、借助机器学习流构建全域参数搜索空间三、优化评估指标选取1. 高级评估指标的选用方法2. 同时输入多组评估指标四、优化后建模流程在正式讨论关于网格搜索的进阶…...
基于 Python 实时图像获取及处理软件图像获取；图像处理；人脸识别设计 计算机毕设 附完整代码+论文 +报告
界面结果：图像获取；图像处理；人脸识别 程序结构设计 图形用户界面设计与程序结构设计是互为表里的。或者说，程序结构设计是软件设计最本质、最核心的内容。徒有界面而内部逻辑结构混乱的软件一无是处。 Windows 操作系统是一款图形化的操作系统，相比于早期的计算机使用的命…...
前后端RSA互相加解密、加签验签、密钥对生成(Java)
目录一、序言二、关于PKCS#1和PKCS#8格式密钥1、简介2、区别二、关于JSEncrypt三、关于jsrsasign四、前端RSA加解密、加验签示例1、相关依赖2、cryptoUtils工具类封装3、测试用例五、Java后端RSA加解密、加验签1、CryptoUtils工具类封装2、测试用例六、前后端加解密、加验签交互…...
基于Java+SpringBoot+Vue前后端分离学生宿舍管理系统设计与实现
博主介绍：✌全网粉丝3W，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建、毕业项目实战、项目定制✌ 博主作品：《微服务实战》专栏是本人的实战经验总结，《S…...
前端高频面试题—JavaScript篇（二）
💻前端高频面试题—JavaScript篇（二） 🏠专栏：前端面试题 👀个人主页：繁星学编程🍁 🧑个人简介：一个不断提高自我的平凡人🚀 🔊分享方向…...
业务系统对接大模型的基础方案：架构设计与关键步骤
业务系统对接大模型：架构设计与关键步骤 在当今数字化转型的浪潮中，大语言模型（LLM）已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中，不仅可以优化用户体验，还能为业务决策提供…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：
根据万维钢精英日课6的内容，使用AI（2025）可以参考以下方法： 四个洞见 模型已经比人聪明：以ChatGPT o3为代表的AI非常强大，能运用高级理论解释道理、引用最新学术论文，生成对顶尖科学家都有用的…...
【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）
本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...
STM32---外部32.768K晶振（LSE）无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容；2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容（CL）与匹配电容（CL1、CL2）的关系 2. 如何选择 CL1 和 CL…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分： 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...
Ubuntu系统多网卡多相机IP设置方法
目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机，交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息，系统版本：Ubuntu22.04.5 LTS；内核版本…...
海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》
近日，嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》，海云安高敏捷信创白盒（SCAP）成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天，网络安全已成为企业生存与发展的核心基石，为了解…...