3D旋转相册代码及详细使用教程

相信很多小伙伴看着短视频里的3D旋转相册很想要吧，下面就让我们来看看它的代码及使用方法！

效果展示
代码展示
1.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>3D立体动态相册</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><div id="cube"><!--外层盒子--><ul><li><img src="img/1.jpg" ></li><li><img src="img/2.jpg" ></li><li><img src="img/3.jpg" ></li><li><img src="img/4.jpg" ></li><li><img src="img/5.jpg" ></li><li><img src="img/6.jpg" ></li></ul><!--内层盒子--><ol><li><img src="img/01.jpg" ></li><li><img src="img/02.jpg" ></li><li><img src="img/03.jpg" ></li><li><img src="img/04.jpg" ></li><li><img src="img/05.jpg" ></li><li><img src="img/06.jpg" ></li></ol></div></body>
</html>

2.css

/*默认样式*/
*{margin: 0;padding: 0;
}
ol,ul{list-style: none;}/*外层盒子*/
#cube{height: 200px;width: 200px;/* 将整个盒子至于中间 */position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;/* 这是旋转基点 */transform-origin: -550px 550px 100;/* 设置景深 */perspective:800px; }#cube ul{width: 200px;height: 200px;transform-style: preserve-3d;animation: rotate1 5s linear infinite;
}
#cube ul img{width: 200px;height: 200px;
}
#cube ul li{width: 200px;height: 200px;position: absolute;/* 设置过渡时间 */transition: 2s;
}
#cube ul li:nth-child(1){left: 0;top: 0;opacity: .4;transform: translateZ(100px);}
#cube ul li:nth-child(2){left: 100px;top: 0;transform: rotateY(90deg);opacity: .4;}
#cube ul li:nth-child(3){left: -100px;top: 0;transform: rotateY(-90deg);opacity: .4;}
#cube ul li:nth-child(4){left: 0;top: 100px;transform: rotateX(-90deg);opacity:.4;}
#cube ul li:nth-child(5){left: 0;top: -100px;transform: rotateX(90deg);opacity: .4;}
#cube ul li:nth-child(6){left: 0;top: 0;transform: translateZ(-100px) rotateY(180deg);opacity: .4;} /* 内层盒子*/
#cube ol{width: 100px;height: 100px;position: absolute;left: 50px;top: 50px;/* 给内层盒子设置3d空间 */transform-style: preserve-3d;/* 设置动画 */animation: rotate1 5s linear infinite;
}
#cube ol img{width: 100px;height: 100px;
}
#cube ol li{width: 100px;height: 100px;position: absolute;
}
#cube ol li:nth-child(1){left: 0;top: 0;opacity: .7;transform: translateZ(50px);}
#cube ol li:nth-child(2){left: 100px;top: 0px;transform-origin: left;transform:translateZ(50px) rotateY(90deg);opacity: .7;}
#cube ol li:nth-child(3){left: -100px;top: 0px;transform-origin: right;transform:translateZ(50px) rotateY(-90deg);opacity: .7;}
#cube ol li:nth-child(4){left:0px;top: 100px;transform-origin: top;transform:translateZ(50px) rotateX(-90deg);opacity: .7;}
#cube ol li:nth-child(5){left:0px;top: -100px;transform-origin: bottom;transform:translateZ(50px) rotateX(90deg);opacity: .7;}
#cube ol li:nth-child(6){left:0px;top: 0px;transform: translateZ(-50px) rotateY(180deg);opacity: .7;}/*外层盒子鼠标移入效果*/
#cube:hover ul li:nth-child(1){transform: translateZ(200px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(2){transform:rotateY(90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(3){transform:rotateY(-90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(4){transform:rotateX(-90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(5){transform:rotateX(90deg) translateZ(100px) scale(1.5);opacity: .6;}
#cube:hover ul li:nth-child(6){transform:rotateY(180deg) translateZ(200px) scale(1.5);opacity: .6;}
/*旋转动画效果*/
@keyframes rotate1{0%{transform: rotateY(0);}100%{transform: rotateY(360deg);}
}

使用方法
1.在桌面（或磁盘内）新建一个文件夹。
2.在3D相册文件夹内再新建两个文件夹和一个文本文档，分别取名为css，img，index。

3.将html下的代码复制粘贴到index中，再将index后缀名改为html。

4.在css文件夹内新建一个文本文档，取名为style，将css下的代码复制粘贴到style中，再将style后缀名改为css。

5.将12张jpg类型的照片放入img文件夹中，分别命名为01-06，1-6。（大小：只要照片宽等于高即可，推荐：01-06:100×100，1-6:200×200，序号为6的照片上下颠倒一下效果更好哦）
6.最后双击index即可。

注：IE浏览器无法呈现效果，推荐使用其他浏览器。3、4两步改的是后缀名，请检查新建文本文档是否以.txt结尾，如果不是则后缀名隐藏了。改为显示后按上述步骤即可。

因为有许多博友按步骤操作后仍有错误，所以我把资源压缩上传到百度网盘了，需要的请点击这里链接：浪漫相册
提取码：gclr
各位老铁，点个赞再走呗，万分感谢。

3D旋转相册代码及详细使用教程相关推荐

3d旋转相册代码源码_如何使用CSS开发精美3D旋转相册？
借助CSS所提供的animation动画属性及2D.3D变换属性,我们可以摆脱对JavaScript的依赖,设计开发各类效果优秀的前端动态效果,在之前文章和视频中我们也介绍了不少基于CSS与JavaS ...
3d旋转相册代码源码_原生 JS 实现 3D 立方体
访问该URL可查看效果:http://is666a.gitee.io/javascript3d_cube/ 项目源码已上传码云:小朋友/JavaScript 3D立方体原生 JS 实现 3D 立方体 ...
3d旋转相册代码源码_实现可旋转的Reflection Probe(原创)
需求:公司的端游项目有个超大场景(8x8公里),里面需要各种角度的房子,但unity自带的反射球是长方体模式且不支持旋转.相比ue4 早早就有可旋转的长方体和球体2种模式,unity的2017 2 ...
3d旋转相册代码源码_用代码制作3d相册签到墙（附源码）
七夕就要到了,不管是单身狗的小伙伴还是已经有狗的小伙伴都比较焦虑了,单身的小伙伴着急怎么尽快脱单,不是单身的小伙伴又纠结该送点什么礼物好哄男(女)朋友,呐,在买香水口红的同时,也不要忘记花点小心思,心 ...
程序员送给女朋友的3D旋转相册附背景音乐
送给女朋友的3D旋转相册附背景音乐详细教程及源码如下,简单易上手,亲测有效. 教程如下: 文件建立 spin.css建立 spin.html建立 img文件建立文件建立首先在桌面新建一个名为&qu ...
HTML-网页-3D旋转相册-创意相册
HTML-网页-3D旋转相册代码: <!DOCTYPE html> <html lang="en"> <head><meta chars ...
每日一技：给女友用代码做一个3D旋转相册，每天亿遍忘记初恋~
前言不会表白?!我来教你给女朋友或者正在追求的妹子一点小惊喜~ 今天这篇文章就是演示给女友做一个3D旋转相册,学会的小伙伴可以给自己的女朋友或者喜欢的女生做一个,相比几百上千的礼物,零成本的技术实现 ...
HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码爱心表白网页这是程序员表白 ...
HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是 ...
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心表白这是程序员 ...

3D旋转相册代码及详细使用教程

3D旋转相册代码及详细使用教程相关推荐

最新文章

热门文章