三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文，后来不知怎么回事不见了，现在重新发一下。
中秋主题的3D旋转相册
如图，这是通过Javascript和css3来实现的。整个案例只有不到80行代码，我希望通过这个案例，让正处于迷茫期的js初学者感受到学习的乐趣。我会尽可能讲得详细，不需要你对css和js有多么高深的理解，你也可以跟着一步步做出来。如果你是为了讨女票开心，那么也完全可以把图片换成对方的照片，在某个特别的时刻给对方一个惊喜哦 ~
css3的强大使得网页的展示变得空前得丰富起来，再配合简单的js代码，就可以实现这个效果。好了，话不多说，让我们开始吧。
1. 页面模板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>中秋节快乐</title>
<style>
</style>
</head>
<body>
</body>
<script>
</script>
</html>
** 1.1 ** ：这句话的含义是，设置网页编码为utf-8，确保中文可以正常显示。
1.2.中秋节快乐 ：设置网页的标题。
就是它：
1.3. ： 在style里面可以编写css样式，所谓的css就是相当于给dom元素披上了一层美丽的外衣。
1.4. ： 在body区域里面添加dom元素，也就是一个网页的主题框架。比如div，p，a标签等，就是放在这个部分的。
1.5. ：这是js脚本区域，单纯的说，就是为了动态地控制body区域里面的标签元素。之所以放在body的下面，是为了保证浏览器先把所有的dom元素都渲染完毕，才进行js操作。
2.调背景色
在style块里面给整个页面渲染成黑色调
*{padding:0px;margin:0px;} /*这是为了消除默认dom元素的内外边距，使得我们写css的时候更精确*/
body{background:#000;}
000是纯黑色
F00是纯红色
0F0是纯绿色
00F是纯蓝色
顺便提一下，#FFF肯定就是纯白色了。
在本案例中，我们将背景色设置为纯黑色。
3.制作3D相框
我们我们画一个id为photos的div作为相框来装载所有的图片。
<div id="photos"></div>
这句话一写，页面上啥也没有，div连宽度和高度都没有，这个时候，我们就要用css来给div添加一件美丽的外衣了。
#photos{
width:110px; /*宽度*/
height:180px; /*高度*/
border:1px solid #ccc; /*加一个灰色边框*/
margin:160px auto; /*水平居中，高度距离顶部100px*/
}
这样还是平面的效果，没有3D的感觉，如果你不相信，我们可以用transform属性让它沿着Y轴起来，看看是不是3D的。
transform:rotateY(0deg);
这句话表示将div盒子沿着Y轴旋转0度。
让我们用谷歌浏览器打开（或者其他浏览器，不要太老就行），打开调试模式（大部分浏览器都是直接按一下F12就可以了），进入这样的界面。
按一下这里的箭头，就可以查看dom元素了。
把鼠标滑到div上，点击。
然后右边就会出来这样的界面，里面有这个div所有的样式。
我们找到 transform:rotateY(0deg); 这一行，然后可以动态地改变它的值，我们点几下，选中 0deg 这几个字，再按键盘上的向上箭头，就会这样：
哇，转起来了，好神奇！
我当初知道有这么个名堂的时候，心里就特别兴奋。
这还是2D的，没有3D效果，如何添加3D效果呢?
我们加上这两个属性，
transform-style:preserve-3d;/*设置3d环境*/
perspective:800px; /*设置景深为800px*/
所谓的景深， 简单说来，就是对好焦的范围。它能决定是把背景模糊化来突出拍摄对象，还是拍出清晰的背景。我看到网上是这么说的，喜欢摄影的朋友应该很了解。
为了突出效果，我们添加一张图片，顺便给图片加上一点倒影效果。
<div id="photos">
<img src="img/1.jpg" />
</div>
#photos img{
width:100%;
height:100%;
position:absolute;
box-shadow:0 0 8px #eaeaea;
box-shadow: 1px -1px 6px #666;
border-radius:4px;
-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
cursor:pointer;
}
效果：
看起来有点效果了吧。
我一共准备了8张图片，现在将剩余的图片也添加进来。
<div id="photos">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
</div>
到目前为止，所有的图片都是叠在一起的，我们思考如何将他们分散开来，围城一圈呢?
4.将图片散开，围成一圈
在3维坐标中，不仅有X轴，Y轴，还有Z轴。我们首先要明白Z轴是什么概念，Y轴是左右旋转，上面已经演示过了，不难想到X轴应该就是上下旋转，那么Z轴呢？
我们先把倒影去掉，看起来清楚些。
/*-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));*/
好，让我们来一探究竟：
哇，原来如此！
Z轴就是垂直于横切面的一条轴！
我们现在不需要绕着Z轴旋转，试试让相册沿着Z轴移动一段距离如何?
translateZ可以帮我们实现这一个效果。
回到正题。
我们的目的是让所有的图片分散开来，那么第一步就是让每一张图片均匀地根据Y轴转过一个角度。这个角度是多少呢？
一圈是360度，除以图片的张数，就是每一张图片转过的角度了。
我们用js来实现：
var photosDom = document.getElementById('photos');
//获取图片数组
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前面不要加空格
}
代码是比较明了的，就是一个除法运算，然后给每一张图片增加一个旋转样式即可。
效果：
可见，每一张图片都转过了一定的角度。
也就是说，这个时候，每张图片的Z轴都不一样了！
如果你还是觉得有难度，没关系，我们拿其中一张图片来举例，让它沿着它自己的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)';
}
}
显而易见了，就是这么回事，那么解决方案自己就出来了，我们只需要在每一张图片根据Y轴旋转的时候，就让它沿着Z轴“飘”出来就可以啦！
距离稍微大一点，就380px吧。
for(var i = 0; i < len;i++){
images[i].style = 'transform : rotateY(' + deg * i + 'deg) translateZ(380px)'; //deg前面不要加空格
}
这样有点太水平了，我们让整个相册往下一点，达到一种稍微有点俯视的效果。让相册根据X轴往下移动个10px就可以了哦。
transform:rotateX(-10deg);
这样效果就出来了。
5.绘制透明酷炫底盘
本案例中，在相册底部，还有一个透明的底盘，现在我们开始实现这个效果。
<div id="photos">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
<img src="img/4.jpg" />
<img src="img/5.jpg" />
<img src="img/6.jpg" />
<img src="img/7.jpg" />
<img src="img/8.jpg" />
<div></div>
</div>
其实，它就是一个放在photos里面的div。我们通过定位布局和css3特性就可以实现了。
上代码：
#photos 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));
}
top属性是一点点调出来的，你也可以用浏览器的调试模式一点点来调整高度。
效果：
6.自动旋转
最后一步，还是由js代码来收尾，我们使用js的定时器setInterval，每隔30毫秒就让整个相册转过一个非常小的角度就行了。
var x = 0;
setInterval(function(){
photosDom.style.transform = "rotateX(-10deg) rotateY("+ (x++) * 0.2 +"deg)";
},30);
代码应该还是比较明了的。
最终效果就出来了：
今天做了一点小修改，我把photos的margin由之前的100px auto变为160px auto了。
从效果来看，相册在旋转的过程中，会有一定的偏移，虽然我个人觉得这样的效果也挺有趣的，不过，如果你不希望它的位置发生偏移的话，只需要在photos外边在逃一层div，然后把景深移到外层div就ok啦。
演示地址：http://s-335245.gotocdn.com/demo.html?path=3d
我的个人博客：www.xiaotublog.com
免责声明： 博客中所有的图片素材均来自百度搜索，仅供学习交流，如有问题请联系我，侵立删，谢谢。
三分钟学会用 js + css3 打造酷炫3D相册的更多相关文章
- 三分钟学会@Autowired@Qualifier@Primary注解
三分钟学会@Autowired@Qualifier@Primary注解 2018.10.08 20:24 154浏览 今天主要简单的跟大家介绍一下spring自动装配相关的@Autowired,@Qu ...
- [转]三分钟学会.NET Core Jwt 策略授权认证
[转]三分钟学会.NET Core Jwt 策略授权认证 一.前言# 大家好我又回来了,前几天讲过一个关于Jwt的身份验证最简单的案例,但是功能还是不够强大,不适用于真正的项目,是的,在真正面对复杂而 ...
- 三分钟学会使用Derby数据库
Derby数据库是一个纯用Java实现的内存数据库,属于Apache的一个开源项目.由于是用Java实现的,所以可以在任何平台上运行:另外一个特点是体积小,免安装,java1.6开始集成了derby数 ...
- 一分钟搞定触手app主页酷炫滑动切换效果
代码地址如下:http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想这 ...
- 使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种滑动冲突
使用NestedScrollView+ViewPager+RecyclerView+SmartRefreshLayout打造酷炫下拉视差效果并解决各种冲突 如果你还在为处理滑动冲突而发愁,那么你需要静 ...
- TensorSpace：超酷炫3D神经网络可视化框架
TensorSpace:超酷炫3D神经网络可视化框架 TensorSpace - 一款 3D 模型可视化框架,支持多种模型,帮助你可视化层间输出,更直观地展示模型的输入输出,帮助理解模型结构和输出方法 ...
- GJM ：JS + CSS3 打造炫酷3D相册 [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- MVC中使用SignalR打造酷炫实用的即时通讯功能附源码
前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时走的太急,忘记把代码拿出来.想想这已经是大半年前的事情了,时间过 ...
- MVC中使用SignalR打造酷炫实用的即时通讯功能(轉載)
資料來源:http://www.fangsi.net/1144.html 前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯 ...
随机推荐
- 【AR实验室】ARToolKit之制作自己的Marker/NFT
0x00 - 前言 看过example后,就会想自己动动手,这里改改那里修修.我们先试着添加自己喜欢的marker/nft进行识别. 比如我做了一个法拉利的marker: 还有网上找了一个法拉利log ...
- jQuery动画-圣诞节礼物
▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...
- 基于fis3的组件可视化道路
首先说明一下,即使不熟悉fis3,阅读文本应该也会有所收获. 本文以fis-parser-imweb-tplv2插件为模板插件,目的不在于使用哪个模板,而是组件可视化的实现思路,不必担心. 先说说模板 ...
- [修正] Firemonkey TFrame 存档后，下次载入某些事件连结会消失（但源码还在）
问题:Firemonkey TFrame 存档后,下次载入某些事件连结会消失(但源码还在) 解决:(暂时方法) type TTestFrame = class(TFrame) public const ...
- python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）
类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...
- NGINX引入线程池 性能提升9倍
1. 引言 正如我们所知,NGINX采用了异步.事件驱动的方法来处理连接.这种处理方式无需(像使用传统架构的服务器一样)为每个请求创建额外的专用进程或者线程,而是在一个工作进程中处理多个连接和请求.为 ...
- 深入理解css3中nth-child和 nth-of-type的区别
在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...
- iOS开源项目周报1215
由OpenDigg 出品的iOS开源项目周报第一期来啦.我们的iOS开源周报集合了OpenDigg一周来新收录的优质的iOS开发方面的开源项目,方便iOS开发人员便捷的找到自己需要的项目工具等. PY ...
- iOS7 NavigationController 手势问题
在iOS7中,如果使用了UINavigationController,那么系统自带的附加了一个从屏幕左边缘开始滑动可以实现pop的手势.但是,如果自定义了navigationItem的leftBarB ...
- 烂泥：redis3.2.3安装与配置
本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我的微信ilanniweb 前一段时间写过一篇codis集群的文章,写那篇文章主要是因为当时的项目不支持redis自 ...