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 添加动态背景 实 ...
随机推荐
- mysql创建数据库
mysql创建数据库 创建utf8编码的数据库 CREATE DATABASE IF NOT EXISTS my_db default character set utf8 COLLATE utf8_ ...
- Chrome同步最新host文件IP列表
使用Chrome的童靴是不是很多都碰到同步问题呢?网上查来查去的都是给些host文件的修改,可是都是几年前的东西,地址都不对了,想想还是自己找到需要解析的域名的IP地址吧 步骤: 1.DNS设置为8. ...
- ssh(sturts2_spring_hibernate) 框架搭建之hibernate1
一.hibernate简单了解: ⑴.hibernate一个java领域里面的一个持久化的ORM框架. 持久化:就是对对象的数据修改,hibernate会把修改的数据同步到数据库中. ORM:Obje ...
- Script Task 引用 package variable
Script Task 能够使用C#代码进行编程,许多复杂的逻辑都可以使用C# 脚本来实现,不仅灵活,而且强大. 1,能够传递package variable 给 Script Task ,并且Scr ...
- JS中call、apply、bind使用指南，带部分原理。
为什么需要这些?主要是因为this,来看看this干的好事. box.onclick = function(){ function fn(){ alert(this); } fn();}; 我们原本以 ...
- 【WP开发】手电筒
或许很多人都想到,可以利用手机上摄像头的闪光灯做手电筒,当然,有利必有害,每次使用的时间不要过长,几分钟一般不会有什么问题,如果时间太长,难保会有损伤. 以往的方案是调用视频录制功能来开始录制视频,同 ...
- HTML5标签嵌套规则
× 目录 [1]分类 [2]子元素 [3]总结 前面的话 在html5中,<a>元素的子元素可以是块级元素,这在以前是被认为不符合规则的.本文将详细介绍html5的标签嵌套规则 分类 ht ...
- Session监听器
Session监听器,是用来监听session对象创建和关闭的.有时我们需要在session创建或关闭时执行一些操作.这是就可以使用Session Listenner. .在项目的web.xml文件中 ...
- c#基础之长度可变类型相同的参数列表
为了简化编码,c#提供了一个特殊的关键字params,允许在调用方法时提供数量可变的实参,而不是由方法实现固定好的形参数量.先看代码吧. using System; using System.Linq ...
- 材价看板（1）- 如何建立你的第一个kanban，看看这些暴露的问题你们有没有？
今年负责一个老产品新团队,和几年前的指标组一样,现在的团队没有采用什么研发方法,于是我开始了团队的看板之旅. 12月22日给材价整个部门的产品研发相关人员做了一次kanban工作坊培训, 以及敏 ...