HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/32964301
首先说明一下创意的出处：http://www.zhangxinxu.com/study/201209/pictures-3d-slide-view.html（张鑫旭的博客 ），对前台感兴趣的能够没事去看看他的博客，非常给力~
这篇博客的目的是由于上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比較重要的知识点没讲到，就是perspective和tranlateY
效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转木马，绕着我大文理旋转，不忘母校的培育之恩~
1、perspective
perspective属性包含两个属性：none和具有单位的长度值。
当中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。还有一个值<length>接受一个长度单位大于0的值。并且其单位不能为百分比值。<length>值越大。角度出现的越远。从而创建一个相当低的强度和非常小的3D空间变化。反之。此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。
简单一点说：当perspective设置length时，假设越小则表示3D效果越明显，你的眼睛就越靠近3D物体，反之则反之。
2、transform: translateZ(length)
假设设置了perspective：300px时，设置translateZ的值越小则子元素大小越小，当设置值接近300px时，则仿佛此元素在面前，当超过300px以后。则曾经到达你视野的后面，该元素就不可见了。
上例的核心：
1、首先全部的图片的容器position:absolute，叠加在一起，然后一次设置rotateY分别为40*i ，i= 0 , 1, 2...9 。全部图片会相交成一个相似花的形状
2、然后为每一个图片的容器设置translateZ。全部图片会从相应的角度向外移动，扩展成一个大圆，即上图效果。
html:
<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"/><link href="css/reset.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="../../jquery-1.8.3.js"></script><script type="text/javascript">// alert( 64 / Math.tan(20 / 180 * Math.PI));var transform = function (element, value, key){key = key || "Transform";["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix){element.style[prefix + key] = value;});return element;}$(function (){var deg = -40 , i = 1;$("#container").click(function (){transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")});});</script></head>
<body>
<div id="stage"><ul id="container"><li><img src="img/1.jpg"/><span>Do one thing at a time, and do well..</span></li><li><img src="img/2.jpg"/> <span>Do one thing at a time, and do well..</span></li><li><img src="img/3.jpg"/> <span>Keep on going never give up.</span></li><li><img src="img/4.jpg"/> <span>Whatever is worth doing is worth doing well.</span></li><li><img src="img/5.jpg"/> <span>Believe in yourself.</span></li><li><img src="img/6.jpg"/> <span>Action speak louder than words.</span></li><li><img src="img/7.jpg"/> <span>Never put off what you can do today until tomorrow.</span></li><li><img src="img/8.jpg"/> <span>Jack of all trades and master of none.</span></li><li><img src="img/9.jpg"/> <span>Judge not from appearances.</span></li></ul>
</div>
</body>
</html>CSS：
li{width: 128px;box-shadow: 0 1px 3px rgba(0, 0, 0, .5);position: absolute;bottom: 0;}li img{width: 128px;box-shadow: 0 1px 3px rgba(0, 0, 0, .5);vertical-align: middle;}li span{display: block;width: 128px;text-align: center;color: #333;font-size: 8px;}#stage{width: 900px;min-height: 100px;margin-left: auto;margin-right: auto;padding: 100px 50px;-webkit-perspective: 1200px;position: relative;}#container{background: url("img/xawl.jpg") no-repeat 0 0;margin-top: 200px;width: 128px;box-shadow: 0 1px 3px rgba(0, 0, 0, .5);height: 100px;margin-left: -64px;-webkit-transition: -webkit-transform 1s;transition: transform 1s;-webkit-transform-style: preserve-3d;position: absolute;left: 50%;}li:nth-child(0){-webkit-transform: rotateY(0deg) translateZ(300px);}li:nth-child(1){-webkit-transform: rotateY(40deg) translateZ(300px);}li:nth-child(2){-webkit-transform: rotateY(80deg) translateZ(300px);}li:nth-child(3){-webkit-transform: rotateY(120deg) translateZ(300px);}li:nth-child(4){-webkit-transform: rotateY(160deg) translateZ(300px);}li:nth-child(5){-webkit-transform: rotateY(200deg) translateZ(300px);}li:nth-child(6){-webkit-transform: rotateY(240deg) translateZ(300px);}li:nth-child(7){-webkit-transform: rotateY(280deg) translateZ(300px);}li:nth-child(8){-webkit-transform: rotateY(320deg) translateZ(300px);}li:nth-child(9){-webkit-transform: rotateY(360deg) translateZ(300px);}
div#stage作为舞台，设置perspective。每一个li分别设置rotateY。以及translateZ；然后我们会div#container设置了-webkit-transform-style: preserve-3d;
transform-style: flat | preserve-3d
当中flat值为默认值。表示全部子元素在2D平面呈现。preserve-3d表示全部子元素在3D空间中呈现。
假设对一个元素设置了transform-style的值为preserve-3d。它表示
不运行平展操作，他的全部子元素位于3D空间中。
普通情况下。此属性用于3D动画效果的运行元素。即就是它要应用3D动画效果。所以它的子元素都应该在3D空间。
有一点要注意：本样例，事实上正在的动画效果。在于鼠标点击。div#container在不端的改变rotateY。全部的图片元素均在div#container中。且已经展现为旋转木马效果，如今要做的就是旋转这个木马。所以仅仅须要每次改变div#container的rotateY 40角度就可以。
欢迎各位指点~
源代码点击下载
转载于:https://www.cnblogs.com/yangykaifa/p/6715088.html
HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊相关推荐
- HTML5 CSS3 专题 诱人的实例 3D旋转木马效果相册
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果
首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语, ...
- HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果 以及图片提交
今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相册之后都可以 ...
- html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
- html3d旋转效果相册,HTML5css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
- Php开源h5相册系统,HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解
HTML5 CSS3专题 纯CSS打造相册效果的示例代码详解: 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享 ...
- 跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程 编辑 锁定 讨论 上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...
- css3旋转木马轮播图,超酷jQuery 3D旋转木马效果轮播图插件
jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得推荐. 由 ...
- html旋转木马切换效果,超酷jQuery 3D旋转木马效果轮播图插件 -HTML5功能
简要教程 jCarrousel是一款炫酷且强大的3D旋转木马效果轮播图jQuery插件.该旋转木马插件可以自适应屏幕大小来调整图片的间距,可实现自动播放等.jCarrousel代码简洁,使用简单,值得 ...
最新文章
- css3媒体查询实现网站响应式布局
- html语言div什么意思,css中div是什么意思？
- uva 544(kruskal 变形)
- Linux闲时自动抢占GPU脚本
- Spring Cloud Alibaa
- 四年级计算机课程,信息技术(四年级)全部课程PPT课件.ppt
- Spring项目包变文件夹
- 微信终于可以隐身了，快看看！
- HadoopDB GlobalHasher的参数问题
- java boxlayout 换行,继承FlexboxLayout自定义可自动换行的tag标签
- Python txt转换为excel
- Windows 10 自带的远程协助工具 快速助手
- 潘多拉固件设置ipv6_WAN口获取单一IPv6地址时，内网使用IPv6的方法（教育网可用）...
- PHP发送邮件类库PHPMailer的简单使用 摘自 现代魔法研究协会
- ProjectProfessional2003密钥
- Domino管理端 - 日常命令
- angular.js 错误： Error [$injector:unpr] 原因
- excel组合汇总_Excel汇总20150202
- 微信小程序开发之页面布局
- 中国历史上的著名武将有哪些？