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 添加动态背景 实 ...
随机推荐
- sql分组(orderBy、GroupBy)获取每组前一(几)条数据
sql数据库实现分组并取每组的前1(几)条数据 测试数据准备工作: 根据某一个字段分组取最大(小)值所在行的数据: 创建表并且插入数据 ),Val )) , 'a1--a的第一个值') , 'b2b2 ...
- mysql创建数据库指定编码uft8
mysql创建数据库指定编码uft8 CREATE DATABASE IF NOT EXISTS my_db default character set utf8 COLLATE utf8_gener ...
- SQLSERVER中的ALLOCATION SCAN和RANGE SCAN
SQLSERVER中的ALLOCATION SCAN和RANGE SCAN 写这篇文章的开始,我还不知道ALLOCATION SCAN的工作原理是怎样的,网上资料少得可怜 求助了园子里的某位大侠,他看 ...
- TTAS Lock C++11 实现
template<class Lock> class Lock_guard{ private: Lock lock; public: explicit Lock_guard(Lock&am ...
- JSP开发环境配置问题解答
有过JSP开发经验的同学对于JSP开发环境的配置一定非常的很有感触,十分的繁琐,有时因为一个小的问题导致我们配置的配置前功尽弃,本篇我将重点带领大家一起探讨一下关于JSP环境配置的一些常见问题,及解决 ...
- Html标签之frameset&图片切换
今天为大家分享一下刚刚总结好的html经验,以备不时之需. 首先介绍一下frameset标签,此标签用于同一页面内切换网页,在大多数网页中都可以看到,因为项目的需要,故而研究一二. frameset标 ...
- Java多线程系列--“JUC线程池”05之 线程池原理(四)
概要 本章介绍线程池的拒绝策略.内容包括:拒绝策略介绍拒绝策略对比和示例 转载请注明出处:http://www.cnblogs.com/skywang12345/p/3512947.html 拒绝策略 ...
- mybatis generator配置生成代码的问题
接触第二种orm两天下来,一脸懵逼.mybatis是大多数公司所推崇的,相比于hibernate性能较为好的,操作更为方便的轻量级工具,所以小富就搞起这个orm.好吧,都说mybatis有个配置可以自 ...
- [Node.js] 使用node-forge保障Javascript应用的传输安全
原文地址:http://www.moye.me/2015/12/19/protect_jsapp_tsl_by_using_node-forge/ 引子 半年前的最后一次更新(惭愧 ),提到了对称与 ...
- Sparse Filtering 学习笔记（二）好特征的刻画
Sparse Filtering 是一个用于提取特征的无监督学习算法,与通常特征学习算法试图建模训练数据的分布的做法不同,Sparse Filtering 直接对训练数据的特征分布进行分析,在所谓 ...