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 添加动态背景 实 ...
随机推荐
- 《PHP Manual》阅读笔记3 —— 类与对象
1.PHP 中的所有函数和类都具有全局作用域,可以定义在一个函数之内而在之外调用,反之亦然. PHP 不支持函数重载,也不可能取消定义或者重定义已声明的函数. 当一个函数是有条件被定义时,必须在调用函 ...
- Microsoft Visual Studio正忙解决办法
问题描述 前段时间用vs2015进行开发.出现如下问题,关闭vs进程重启vs还是无法解决. 如何解决 进入本地项目.vs文件夹 这个文件夹下有个.suo文件,删除该文件,用任务管理器杀掉vs的进程,重 ...
- JSON学习之二
1.JSON语法是JavaScript对象表示法的子集,语法规则: **数据在名称/值对中 **数据由逗号分隔 **花括号保存对象 **方括号保存数组 2.JSON名称/值对:JSON数据的书写格式是 ...
- Reporting Service 配置SMTP和设置订阅出现的异常
SSRS能够按照schedule,以mail的形式发送report,这是通过设置subscription report来实现的. 1,发送mail需要在SSRS中配置SMTP Server,如果没有R ...
- 一套后台管理html模版
最近自己需要一套后台管理的模版,然后去网上查找,模版的确很多,但是适合我的并不多.我需要的模版是不会很大,我能够控制代码,样式不要太古朴,最好有点CSS3的效果.最后终于找到一张主页,然后再根据这个主 ...
- PHP面向对象中的重要知识点(三)
1. namespace: 和C++中的名字空间很像,作用也一样,都是为了避免在引用较多第三方库时而带来的名字冲突问题.通过名字空间,即便两个class的名称相同,但是因为位于不同的名字空间内,他们仍 ...
- 敏捷个人－认识自我，管理自我 v0.8.pdf 下载
2009年我在blog上写了个人管理系列的一些blog,其中一些文章深受大家的喜欢.想到写这个系列是源于在实施敏捷Scrum方法时,对方法实施是否对人的水平需要高要求的一些思考.自组织团队是建立在敏捷 ...
- maven引入json-lib的正确方法
<dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...
- app令牌的一个token实现
app登陆验证不能使用session来判断了.然后查资料都说用令牌,没找到合适的方法,我的眼界太小.另外,越来越感觉基础的重要,比如,session是什么,我竟无言以对.不知道session是什么,怎 ...
- jQuery对象和DOM对象的相关知识
所谓的DOM就是Document Object Model(文档对象模型)的缩写,或许是我水平低的缘故,感觉就是HTML的标记元素嘛,所以作者画了下面的图: 像这样的元素,就是所谓的DOM对象,获取值 ...