世界上总有一半人不理解另一半人的快乐。

——《爱玛》

一、前言

二、本期作品介绍

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年第十八期，希望得到大家的喜欢

【前端领域】3D旋转超美相册（HTML+CSS）相关推荐

HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
Html 3D旋转相册制作
程序示例精选 Html 3D旋转相册制作如需安装运行环境或远程调试,见文章底部微信名片,由专业技术人员远程协助! 前言这篇博客针对<<Html 3D旋转相册制作>>编写代 ...
3D旋转相册+背景音乐，纯js版本
谁说程序员没有风趣,风趣起来自己都害怕,来自程序员的最后倔强. <!DOCTYPE html> <html> <head lang="en"> ...
HTML5七夕情人节表白网页_飘落蒲公英动画超酷炫的HTML5页面_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册
HTML5七夕情人节表白网页❤飘落蒲公英动画超酷炫的HTML5页面❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 ...
我对象说陪我过七夕，象说没时间，我一怒给女神做了一个某音上很火的3D旋转相册
大家好,我是辣条. 七夕快到了,有人开心有人愁,辣条就是愁的那个,辣条也是有女朋友的,就是太废打气筒了,隔三差五就要充气,阿西吧... 今天这篇博客就是演示做一个前端3D旋转相册,学会的小伙伴可以给自 ...
送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)520情人节/七夕情人节/程序员表白...
❉ 送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册？
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
前端实现3D旋转木马相册
前端实现3D旋转木马相册,自动旋转鼠标移入停止转动,移出继续转动 <!doctype html> <html lang="zh-CN"> <head& ...
HTML5 3D旋转图片相册
H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CSS3 新属性的了解及掌握. 完整代码如下: <!DOCT ...

【前端领域】3D旋转超美相册（HTML+CSS）

一、前言

二、本期作品介绍

3D旋转相册

三、效果展示

四、详细介绍

五、编码实现

index.html

style.css

img

六、获取源码

公众号获取源码

【前端领域】3D旋转超美相册（HTML+CSS）相关推荐

最新文章

热门文章