网页|实现酷炫3D相册
时间:2022-07-22
本文章向大家介绍网页|实现酷炫3D相册,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、创建文件目录
在Hbuilder在新建一个目录,创建css和js文件。
图1
2、调背景色
在style块里面给整个页面渲染成黑色调。
*{padding:0px;margin:0px;}
/*这是为了消除默认dom元素的内外边距,使得我们写css的时候更精确*/
body{
background-color: #000;
}
3、制作3D相册
(1)画一个id为wrap的div作为相框来装载所有的图片。
<div id="wrap">
<img src="img/1.jpg" alt=""/>
<img src="img/2.jpg" alt=""/>
<img src="img/3.jpg" alt=""/>
<img src="img/4.jpg" alt=""/>
<img src="img/5.jpg" alt=""/>
<img src="img/6.jpg" alt=""/>
<img src="img/7.jpg" alt=""/>
<img src="img/8.jpg" alt=""/>
</div>
(2)为相框设置样式,用transform:rotateY(-10deg)为它设置旋转效果,用transform-style:preserve-3d来为图片设置3D效果。
#wrap{
width: 110px;
height: 180px;
margin: 350px auto;
transform-style: preserve-3d;
transform:rotateY(-10deg);
}
(3)为图片设置景深(景深:对好焦的范围。它能决定是把背景模糊化来突出拍摄对象,还是拍出清晰的背景)。
perspective:700px;
(4)给图片添加倒影效果。
img{
width: 110px;
height: 180px;
position: absolute;
box-shadow: 1px -1px 6px #666;
-webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
transition: 0.5s;
}
图2
4、将图片散开,围成一圈。
(1)让所有的图片分散开来,让每一张图片均匀地根据Y轴转过360度。
var photosDom = document.getElementById('wrap');
//获取图片数组
var images = photosDom.getElementsByTagName('img');
//获取图片数量
var len = images.length;
//计算每张图片按Y轴旋转的角度
var deg = Math.floor(360 / len);
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格
}
效果如图:
图3
(2)编写js代码,让其中一张图片沿着它自己的Z轴向外移动。
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg)'; //deg前面不要加空格
if(i == 1){
images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(300px)';
}
}
效果如图:
(3)用js代码,在每一张图片根据Y轴旋转的时候,就让它沿着Z轴“飘”出来。
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格
}
(4)如果相册整体太水平了,可以用transform:rotateX(-10deg)让整个相册根据X轴向下移动10px,达到俯视的效果。
transform:rotateX(90deg);
5、绘制透明底盘
它是一个放在wrap里面的div,通过定位布局和css3特性就可以实现。
<div id="wrap">
<img src="img/1.jpg" alt=""/>
<img src="img/2.jpg" alt=""/>
<img src="img/3.jpg" alt=""/>
<img src="img/4.jpg" alt=""/>
<img src="img/5.jpg" alt=""/>
<img src="img/6.jpg" alt=""/>
<img src="img/7.jpg" alt=""/>
<img src="img/8.jpg" alt=""/>
<div></div>
</div>
#wrap div{
width:1200px;
height:1200px;
border-radius:50%;
position:absolute;
top:102%;
left:50%;
margin-left:-600px;
margin-top:-600px;
transform:rotateX(90deg);
background:-webkit-radial-gradient(center center,600px 600px,rgba(158,158,222,0.5),rgba(0,0,0,0));
}
6、最终效果
- Socket学习总结系列(二) -- CocoaAsyncSocket
- 比特币勒索病毒肆虐,腾讯云安全专家给你支招
- HTML5 直播协议之 WebSocket 和 MSE
- IoC在ASP.NET Web API中的应用
- 跟鹅厂老司机学技术之一:“遇见” Kotlin
- 简单的 H5 视频推流解决方案
- 来腾讯云开发者实验室学习.NET
- 跨域资源共享(CORS)在ASP.NET Web API中是如何实现的?
- 使用腾讯云 GPU 学习深度学习系列之六:物体的识别与定位
- npm5 新版功能特性解析及与 yarn 评测对比
- H5直播避坑指南
- 龙门阵之 DevOps 门外汉须知
- 全面进阶 H5 直播(上)
- 这年头,不会斗图都毕不了业?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 关于背包问题的一点发散
- 没有SortedList,如何快速找到中值
- DFS最难也就这样了
- 浅谈二分查找的变种
- BFS(广度优先算法)也就这么回事
- 从零钱兑换再看动态规划的套路
- Azure认知服务之使用墨迹识别功能识别手写汉字
- 基于 TypeScript 的 Weex 优化实践
- R语言数据库中如何多条件排序
- 用好 Java 中的枚举,真的没有那么简单!
- ABAP整型类型的几种位操作 - OR, AND, XOR的
- 【机器学习】算法原理详细推导与实现(七):决策树算法
- 如何使用代码修改SAP CRM One Order CUMULAT_H对象的值
- Caffeine Cache~高性能 Java 本地缓存之王
- 用Python的Pandas和Matplotlib绘制股票唐奇安通道,布林带通道和鳄鱼组线