当前位置: 首页 > news >正文

【前端领域】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 六、获取源码 公众号获取源码 获取源码&#xff1f;私信&#xff1f;关注&#xff1f;点赞&…...

Java——聊聊JUC中的原子变量类

文章目录&#xff1a; 1.什么是原子变量类&#xff1f; 2.AtomicInteger&#xff08;基本类型原子变量类&#xff09; 3.AtomicIntegerArray&#xff08;数组类型原子变量类&#xff09; 4.AtomicMarkableReference&#xff08;引用类型原子变量类&#xff09; 5.AtomicInteger…...

elasticsearch索引与搜索初步

ES支持cURL交互&#xff0c;使用http请求完成索引和搜索操作&#xff0c;最基本的格式如下&#xff1a;创建索引我们可以使用PUT方法创建索引&#xff0c;通过指定“索引”、“类型”、“文档ID”锁定文档&#xff0c;通过参数指定文档的数据。红色部分的路由分别指定了“索引”…...

【Python】多线程与多进程学习笔记

本文是一篇学习笔记&#xff0c;学习内容主要来源于莫凡python的文档&#xff1a;https://mofanpy.com/tutorials/python-basic/threading/thread 多线程 线程基本结构 开启子线程的简单方式如下&#xff1a; import threadingdef thread_job():print(This is a thread of %…...

MySQL基础知识点

1.在Linux上安装好MySQL8.0之后&#xff0c;默认数据目录的具体位置是什么&#xff1f;该目录下都保存哪些数据库组件&#xff1f;在目录/usr/sbin、/usr/bin、/etc、/var/log 分别保存哪些组件&#xff1f; 答&#xff1a;默认数据目录&#xff1a;/var/lib/mysql。保存有mysq…...

代码随想录算法训练营第五十九天| 583. 两个字符串的删除操作、72. 编辑距离

Leetcode - 583dp[i][j]代表以i-1结尾的words1的子串 要变成以j-1结尾的words2的子串所需要的次数。初始化&#xff1a; "" 变成"" 所需0次 dp[0][0] 0, ""变成words2的子串 需要子串的长度的次数,所以dp[0][j] j, 同理&#xff0c;dp[i][0] …...

指针引用字符串问题(详解)

通过指针引用字符串可以更加方便灵活的使用字符串。 字符串的引用方式有两种&#xff0c;下面简单介绍一下这两种方法。 1.用字符数组来存放一个字符串。 1.1 可以通过数组名和下标来引用字符串中的一个字符。 1.2 还可以通过数组名和格式声明符%s输出整个字符串。 具体实…...

数据结构——哈夫曼树编程,输入权值实现流程图代码

一、须知 本代码是在数据结构——哈夫曼树编程上建立的&#xff0c;使用时需将代码剪切到C等软件中。需要输入权值方可实现流程图&#xff0c;但是还需要按照编程换算出的结果自己用笔画出流程图。 下面将代码粘贴到文章中&#xff0c;同时举一个例子&#xff1a;二、代…...

【MySQL】 事务

&#x1f60a;&#x1f60a;作者简介&#x1f60a;&#x1f60a; &#xff1a; 大家好&#xff0c;我是南瓜籽&#xff0c;一个在校大二学生&#xff0c;我将会持续分享Java相关知识。 &#x1f389;&#x1f389;个人主页&#x1f389;&#x1f389; &#xff1a; 南瓜籽的主页…...

Java测试——selenium常见操作(2)

这篇博客继续讲解一些selenium的常见操作 selenium的下载与准备工作请看之前的博客&#xff1a;Java测试——selenium的安装与使用教程 先创建驱动 ChromeDriver driver new ChromeDriver();等待操作 我们上一篇博客讲到&#xff0c;有些时候代码执行过快&#xff0c;页面…...

【三维点云】01-激光雷达原理与应用

文章目录内容概要1 激光雷达原理1.1 什么是激光雷达&#xff1f;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.内联函数 通常&#xff0c;函数调用都有一定的开销&#xff0c;因为函数的调用过程包含建立调用&#xff0c;传递参数&#xff0c;跳转到函数代码并返回。而使用宏是代码内联&#xff0c;可以避开这样的开销。 内联函数&#xff1a;使用内联diamagnetic代替函数调用。把函数…...

图卷积神经网络(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区&#xff0c; 当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前后端分离学生宿舍管理系统设计与实现

博主介绍&#xff1a;✌全网粉丝3W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建、毕业项目实战、项目定制✌ 博主作品&#xff1a;《微服务实战》专栏是本人的实战经验总结&#xff0c;《S…...

前端高频面试题—JavaScript篇(二)

&#x1f4bb;前端高频面试题—JavaScript篇&#xff08;二&#xff09; &#x1f3e0;专栏&#xff1a;前端面试题 &#x1f440;个人主页&#xff1a;繁星学编程&#x1f341; &#x1f9d1;个人简介&#xff1a;一个不断提高自我的平凡人&#x1f680; &#x1f50a;分享方向…...

【微信小游戏开发笔记】第二节:Cocos开发界面常用功能简介

Cocos开发界面常用功能简介 本章只介绍微信小游戏开发时常用的功能&#xff0c;其他功能不常用&#xff0c;写多了记不住&#xff08;其实是懒 -_-!&#xff09;&#xff1a; 层级管理器&#xff0c;用于操作各个节点。资源管理器&#xff0c;用于操作各种文件资源。场景编辑…...

3分钟,学会了一个调试CSS的小妙招

Ⅰ. 作用 用于调试CSS , 比控制台添更加方便&#xff0c;不需要寻找 &#xff1b;边添加样式&#xff0c;边可以查看效果&#xff0c;适合初学者对CSS 的理解和学习&#xff1b; Ⅱ. 快速实现&#xff08;两边&#xff09; ① 显示这个样式眶 给 head 和 style 标签添加一个…...

【项目精选】基于jsp的健身俱乐部会员系统

点击下载源码 社会可行性 随着社会的发展和计算机技术的进步&#xff0c;人类越来越依赖于信息化的管理系统&#xff0c;这种系统能更加方便的获得信息以及处理信息。人们都改变了过去的思维&#xff0c;开始走向了互联网的时代&#xff0c;在 可行性小结 本章在技术可行性上…...

java注解

1. Java注解(Annotation) 2. Java注解分类 3. JDK基本注解 4. JDK元注解 5. 注解分类 6. 自定义注解开发 7. 提取Annotation信息 8. 注解处理器 9. 动态注解处理器(spring aop方式) 1. Java注解(Annotation) Java注解是附加在代码中的一些元信息&#xff0c;用于…...

移动测试相关

一、环境搭建 准备工作&#xff1a; &#xff08;python、pycharm安装配置好&#xff09; 1、Java SDK 安装配置 Java Downloads | Oracle 下载安装后配置系统环境变量&#xff1a;JAVA_HOME&#xff08;jdk根目录路径&#xff09;和path&#xff08;jdk根目录下的bin目录路径…...

SIGIR22:User-controllable Recommendation Against Filter Bubbles

User-controllable Recommendation Against Filter Bubbles 摘要 推荐系统经常面临过滤气泡的问题&#xff1a;过度推荐基于用户特征以及历史交互的同质化项目。过滤气泡将会随着反馈循环增长&#xff0c;缩小了用户兴趣。现有的工作通常通过纳入诸如多样性和公平性等准确性之…...

Python中的进程线程

文章目录前言多进程与多线程基本概念多进程multiprocessing 类对象进程池subprocess模块进程间通信多线程threading实现线程操作线程共享所有变量线程锁参考资料前言 又花了点时间学习了一下Python中的多线程与多进程的知识点&#xff0c;梳理一下供复习参考 多进程与多线程 …...

python(8):使用conda update更新conda后,anaconda所有环境崩溃----问题没有解决,不要轻易更新conda

文章目录0. 教训1. 问题:使用conda update更新conda后&#xff0c;anaconda所有环境崩溃1.1 问题描述1.2 我搜索到的全网最相关的问题----也没有解决3 尝试流程记录3.1 重新安装pip3.2 解决anaconda编译问题----没成功0. 教训 (1) 不要轻易使用conda update更新conda----我遇到…...

c++11 标准模板(STL)(std::multimap)(四)

定义于头文件 <map> template< class Key, class T, class Compare std::less<Key>, class Allocator std::allocator<std::pair<const Key, T> > > class multimap;(1)namespace pmr { template <class Key, class T…...

乐观锁及悲观锁

目录 1.乐观锁 (1).定义 (2).大体流程 (3).实现 (4).总结 2.悲观锁 (1).定义 (2).大体流程 (3).实现 (4).缺点 (5).总结 1.乐观锁 (1).定义 乐观锁在操作数据时非常乐观&#xff0c;认为别的线程不会同时修改数据所以不会上锁&#xff0c;但是在更新的时候会判断一…...

从零学建设网站018马经/分享推广

1 &#xff0c;BLE就是低功率蓝牙。要着重了解两种设备&#xff1a; 1&#xff0c;dual-mode双模设备&#xff1a;简单说就是向下兼容。2&#xff0c;single-mode单模设备&#xff1a;仅仅支持BLE。关于开发主要讲的是单模设备&#xff0c;它可以只靠纽扣电池即可持续工作。2&a…...

做馋嘴小栈官方网站/无货源电商怎么做

空气开关是低压配电网络和电力拖动系统中非常重要的一种电器&#xff0c;它集控制和多种保护功能于一身。除了能完成接触和分断电路外&#xff0c;尚能对电路或电气设备发生的短路&#xff0e;严重过载及欠电压等进行保护&#xff0c;同时也可以用于不频繁地启动电动机。在正常…...

网站怎么做sitemap/百度竞价专员

一、控制结构 sk_buff 和网络报文的存储空间 二、分片的网络报文与scatter/gather IO 网络报文在内存中不一定是连续存储的&#xff0c;同一个网络报文有可能被分成几片存放在内存的不同位置&#xff08;不要和IP分片混淆&#xff0c;IP分片是将一个网络报文分成多个网络报文&a…...

wordpress js调用淘客/厦门站长优化工具

最近使用python 看到这么几个知识点&#xff0c;收集下zipzip() 函数用于将可迭代的对象作为参数&#xff0c;将对象中对应的元素打包成一个个元组&#xff0c;然后返回由这些元组组成的列表。如果各个迭代器的元素个数不一致&#xff0c;则返回列表长度与最短的对象相同&#…...

网站建设需要做的事情/免费网络营销推广软件

在PHP中&#xff0c;数组函数 array_uintersect_assoc () 使用用户提供的回调函数比较值&#xff0c;用内置的函数比较键&#xff0c;计算数组交集。 函数语法&#xff1a; array_udiff_assoc ( array $array1 , array $array2 [, array $array3... ], callable $value_compar…...

西安网站建设公司有哪些/网站搭建公司哪家好

读取7个数&#xff08;1~50&#xff09;的整数值&#xff0c;每读取一个值&#xff0c;程序打印出该值个数的&#xff0a;。 public class Example47 { public static void main(String[] args) { int[] a { 10, 7, 6, 15, 4, 3, 20 }; display(a); } …...