GJM ：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块里面给整个页面渲染成黑色调
顺便提一下，#FFF肯定就是纯白色了。
在本案例中，我们将背景色设置为纯黑色。
3.制作3D相框
我们我们画一个id为photos的div作为相框来装载所有的图片。
这句话一写，页面上啥也没有，div连宽度和高度都没有，这个时候，我们就要用css来给div添加一件美丽的外衣了。
这样还是平面的效果，没有3D的感觉，如果你不相信，我们可以用transform属性让它沿着Y轴起来，看看是不是3D的。
这句话表示将div盒子沿着Y轴旋转0度。
让我们用谷歌浏览器打开（或者其他浏览器，不要太老就行），打开调试模式（大部分浏览器都是直接按一下F12就可以了），进入这样的界面。
按一下这里的箭头，就可以查看dom元素了。
把鼠标滑到div上，点击。
然后右边就会出来这样的界面，里面有这个div所有的样式。
我们找到 transform:rotateY(0deg); 这一行，然后可以动态地改变它的值，我们点几下，选中 0deg 这几个字，再按键盘上的向上箭头，就会这样：
哇，转起来了，好神奇！
我当初知道有这么个名堂的时候，心里就特别兴奋。
这还是2D的，没有3D效果，如何添加3D效果呢?
我们加上这两个属性，
所谓的景深， 简单说来，就是对好焦的范围。它能决定是把背景模糊化来突出拍摄对象，还是拍出清晰的背景。我看到网上是这么说的，喜欢摄影的朋友应该很了解。
为了突出效果，我们添加一张图片，顺便给图片加上一点倒影效果。
效果：
看起来有点效果了吧。
我一共准备了8张图片，现在将剩余的图片也添加进来。
到目前为止，所有的图片都是叠在一起的，我们思考如何将他们分散开来，围城一圈呢?
4.将图片散开，围成一圈
在3维坐标中，不仅有X轴，Y轴，还有Z轴。我们首先要明白Z轴是什么概念，Y轴是左右旋转，上面已经演示过了，不难想到X轴应该就是上下旋转，那么Z轴呢？
我们先把倒影去掉，看起来清楚些。
好，让我们来一探究竟：
哇，原来如此！
Z轴就是垂直于横切面的一条轴！
我们现在不需要绕着Z轴旋转，试试让相册沿着Z轴移动一段距离如何?
translateZ可以帮我们实现这一个效果。
回到正题。
我们的目的是让所有的图片分散开来，那么第一步就是让每一张图片均匀地根据Y轴转过一个角度。这个角度是多少呢？
一圈是360度，除以图片的张数，就是每一张图片转过的角度了。
我们用js来实现：
代码是比较明了的，就是一个除法运算，然后给每一张图片增加一个旋转样式即可。
效果：
可见，每一张图片都转过了一定的角度。
也就是说，这个时候，每张图片的Z轴都不一样了！
如果你还是觉得有难度，没关系，我们拿其中一张图片来举例，让它沿着它自己的Z轴向外移动。然后你就明白了。
显而易见了，就是这么回事，那么解决方案自己就出来了，我们只需要在每一张图片根据Y轴旋转的时候，就让它沿着Z轴“飘”出来就可以啦！
距离稍微大一点，就380px吧。
这样有点太水平了，我们让整个相册往下一点，达到一种稍微有点俯视的效果。让相册根据X轴往下移动个10px就可以了哦。
5.绘制透明酷炫底盘
本案例中，在相册底部，还有一个透明的底盘，现在我们开始实现这个效果。
其实，它就是一个放在photos里面的div。我们通过定位布局和css3特性就可以实现了。
上代码：
top属性是一点点调出来的，你也可以用浏览器的调试模式一点点来调整高度。
效果：
6.自动旋转
最后一步，还是由js代码来收尾，我们使用js的定时器setInterval，每隔30毫秒就让整个相册转过一个非常小的角度就行了。
代码应该还是比较明了的。
最终效果就出来了：
今天做了一点小修改，我把photos的margin由之前的100px auto变为160px auto了。
从效果来看，相册在旋转的过程中，会有一定的偏移，虽然我个人觉得这样的效果也挺有趣的，不过，如果你不希望它的位置发生偏移的话，只需要在photos外边在逃一层div，然后把景深移到外层div就ok啦。
演示地址：http://s-335245.gotocdn.com:8080/demo.html?path=3d
GJM ：JS + CSS3 打造炫酷3D相册 [转载]的更多相关文章
- js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
- JParticles 2.0 发布，打造炫酷的粒子特效
JParticles 2.0 发布,打造炫酷的粒子特效.不好意思哈,在这么繁花似锦的世界里,标题不得不取得吸引眼球一点哈,不然...还是不啰嗦了,我们进入正题吧 简单介绍一下 JParticles 2 ...
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
- 简单CSS3实现炫酷读者墙
如题,给大家介绍和讲解几个常用的CSS3属性,并用到实处. 先看demo(请使用Chrome或者Firefox浏览,IE的靠边): 点此查看实例 觉得爽的可以继续阅读下面的知识点,感觉不爽的可绕行. ...
- Android ViewPager 打造炫酷欢迎页
Android ViewPager 打造炫酷欢迎页 ViewPager是Android扩展v4包中的类,这个类可以让用户切换当前的View.对于这个类的应用场景,稍加修改就可以应用到多个环境下.比如: ...
- Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
1.概述 哈,今天给大家带来一个ViewPagerIndicator的制作,相信大家在做tabIndicator的时候,大多数人都用过 TabPageIndicator,并且很多知名APP都使用过这个 ...
- 一款基于jQuery和CSS3炫酷3D旋转画廊特效插件
这是一款效果炫酷的jQuery和CSS3 3D旋转画廊特效插件.该3D画廊插件可以通过前后导航按钮来切换图片,效果就像旋转木马一样.它还带有点击放大图片,显示图片标题和用键盘操作等功能. 在线预览 ...
- Photoshop和WPF双剑配合，打造炫酷个性的进度条控件
现在如果想打造一款专业的App,UI的设计和操作的简便性相当重要.UI设计可以借助Photoshop或者AI等设计工具,之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或 ...
- hexo的next主题个性化教程:打造炫酷网站
看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景 实 ...
随机推荐
- 修复发生“由于数据移动，未能继续以 NOLOCK 方式扫描”错误的数据库
最近在系统运行中发现了一个错误,错误信息如下: 错误信息:查询A201412C20568单证信息错误 ---> System.Data.OleDb.OleDbException: 由于数据移动, ...
- Liferay7 BPM门户开发之41: Expando API入门
Expando 是liferay的一种自定义表格扩展的方式,从5.0就已存在 , 可以在运行时新建表格\字段\行\值. 这是一种Service Builder之外的轻量级替代扩展方式,不必像Servi ...
- RESTORE DATABASE的standby选项
RESTORE DATABASE [db1] FROM DISK = N'E:\Backup\db2.bak' , MOVE N'db1_Data' TO N'D:\Data\db2.MDF', MO ...
- 邻接矩阵有向图(一)之 C语言详解
本章介绍邻接矩阵有向图.在"图的理论基础"中已经对图进行了理论介绍,这里就不再对图的概念进行重复说明了.和以往一样,本文会先给出C语言的实现:后续再分别给出C++和Java版本的实 ...
- Javascript定时器(二)——setTimeout与setInterval
一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...
- Solr：Schema设计
本文已挪至 http://www.zhoujingen.cn/blog/8546.html Solr将数据以结构化的方式存入系统中,存储的过程中可以对数据建立索引,这个结构的定义就是通过schema ...
- 第16/24周 SQL Server 2014中的基数计算
大家好,欢迎回到性能调优培训.上个星期我们讨论在SQL Server里基数计算过程里的一些问题.今天我们继续详细谈下,SQL Server 2014里引入的新基数计算. 新基数计算 SQL Serve ...
- flexbox简介
flexbox简介 什么是flexbox flexbox是一种新的布局方式,这种布局方式是2009年W3C提出的方案.它可以简便,完整,完成页面的布局.目前,它已经得到所有浏览器的支持. 但是flex ...
- 理解SQL Server是如何执行查询的 (1/3)
查询执行的总图: 根据总图的流程,详细说明每个部分: 1. 请求(Request) SQL Server是C/S架构的平台.与它交互的唯一方式就是发送包含数据库命令的请求.应用程序和数据库之前的通信协 ...
- 解决360、猎豹浏览器等极速模式下css3兼容问题
有时候你会发现你写的animation动画的css3效果,在IE.谷歌.火狐等主流的新版本的浏览器的是没有什么兼容问题的,即便你不写前缀,也是可以显示动画效果的.然后,你本地在360浏览器或猎豹浏览器 ...