转载请标明出处：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:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8"/>
  6.     <link href="css/reset.css" rel="stylesheet" type="text/css"/>
  7.     <script type="text/javascript" src="../../jquery-1.8.3.js"></script>
  8.  
  9.     <script type="text/javascript">
  10.         // alert( 64 / Math.tan(20 / 180 * Math.PI));
  11.         var transform = function (element, value, key)
  12.         {
  13.             key = key || "Transform";
  14.             ["Moz", "O", "Ms", "Webkit", ""].forEach(function (prefix)
  15.             {
  16.                 element.style[prefix + key] = value;
  17.             });
  18.  
  19.             return element;
  20.         }
  21.  
  22.         $(function ()
  23.         {
  24.             var deg = -40 , i = 1;
  25.             $("#container").click(function ()
  26.             {
  27.                 transform($(this)[0], "rotateY(" + (deg * i++) + "deg)")
  28.             });
  29.         });
  30.  
  31.     </script>
  32.  
  33. </head>
  34. <body>
  35. <div id="stage">
  36.     <ul id="container">
  37.         <li>
  38.             <img src="img/1.jpg"/>
  39.             <span>Do one thing at a time, and do well..</span>
  40.         </li>
  41.         <li>
  42.             <img src="img/2.jpg"/> <span>Do one thing at a time, and do well..</span>
  43.         </li>
  44.         <li>
  45.             <img src="img/3.jpg"/> <span>Keep on going never give up.</span>
  46.         </li>
  47.         <li>
  48.             <img src="img/4.jpg"/> <span>Whatever is worth doing is worth doing well.</span>
  49.         </li>
  50.         <li>
  51.             <img src="img/5.jpg"/> <span>Believe in yourself.</span>
  52.         </li>
  53.         <li>
  54.             <img src="img/6.jpg"/> <span>Action speak louder than words.</span>
  55.         </li>
  56.         <li>
  57.             <img src="img/7.jpg"/> <span>Never put off what you can do today until tomorrow.</span>
  58.         </li>
  59.         <li>
  60.             <img src="img/8.jpg"/> <span>Jack of all trades and master of none.</span>
  61.         </li>
  62.         <li>
  63.             <img src="img/9.jpg"/> <span>Judge not from appearances.</span>
  64.         </li>
  65.     </ul>
  66. </div>
  67. </body>
  68. </html>

CSS：

  1.         li
  2.         {
  3.             width: 128px;
  4.             box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  5.             position: absolute;
  6.             bottom: 0;
  7.         }
  8.  
  9.         li img
  10.         {
  11.             width: 128px;
  12.             box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  13.             vertical-align: middle;
  14.         }
  15.  
  16.         li span
  17.         {
  18.             display: block;
  19.             width: 128px;
  20.             text-align: center;
  21.             color: #333;
  22.             font-size: 8px;
  23.         }
  24.  
  25.         #stage
  26.         {
  27.  
  28.             width: 900px;
  29.             min-height: 100px;
  30.             margin-left: auto;
  31.             margin-right: auto;
  32.             padding: 100px 50px;
  33.             -webkit-perspective: 1200px;
  34.             position: relative;
  35.         }
  36.  
  37.         #container
  38.         {
  39.             background: url("img/xawl.jpg") no-repeat 0 0;
  40.             margin-top: 200px;
  41.             width: 128px;
  42.             box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
  43.             height: 100px;
  44.             margin-left: -64px;
  45.             -webkit-transition: -webkit-transform 1s;
  46.             transition: transform 1s;
  47.             -webkit-transform-style: preserve-3d;
  48.             position: absolute;
  49.             left: 50%;
  50.         }
  51.  
  52.         li:nth-child(0)
  53.         {
  54.             -webkit-transform: rotateY(0deg) translateZ(300px);
  55.         }
  56.  
  57.         li:nth-child(1)
  58.         {
  59.             -webkit-transform: rotateY(40deg) translateZ(300px);
  60.         }
  61.  
  62.         li:nth-child(2)
  63.         {
  64.             -webkit-transform: rotateY(80deg) translateZ(300px);
  65.         }
  66.  
  67.         li:nth-child(3)
  68.         {
  69.             -webkit-transform: rotateY(120deg) translateZ(300px);
  70.         }
  71.  
  72.         li:nth-child(4)
  73.         {
  74.             -webkit-transform: rotateY(160deg) translateZ(300px);
  75.         }
  76.  
  77.         li:nth-child(5)
  78.         {
  79.             -webkit-transform: rotateY(200deg) translateZ(300px);
  80.         }
  81.  
  82.         li:nth-child(6)
  83.         {
  84.             -webkit-transform: rotateY(240deg) translateZ(300px);
  85.         }
  86.  
  87.         li:nth-child(7)
  88.         {
  89.             -webkit-transform: rotateY(280deg) translateZ(300px);
  90.         }
  91.  
  92.         li:nth-child(8)
  93.         {
  94.             -webkit-transform: rotateY(320deg) translateZ(300px);
  95.         }
  96.  
  97.         li:nth-child(9)
  98.         {
  99.             -webkit-transform: rotateY(360deg) translateZ(300px);
  100.         }

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角度即可。

欢迎各位指点~

源码点击下载

版权声明：本文为博主原创文章，未经博主允许不得转载。

HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相册的更多相关文章

  1. HTML5 CSS3 专题 ：诱人的实例 3D旋转木马效果相冊

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/32964301 首先说明一下创意的出处:http://www.zhangxinxu ...

  2. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放 ...

  3. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

  4. 前端笔记之HTML5&CSS3（下）2D/3D转换&animate动画

    一.2D转换(transform) CSS3中的transform转换和PS中的变换是一样的,分别有:缩放.位移.斜切.旋转 1.1 transform:scale()缩放 transform:sca ...

  5. html5+css3实现跑动的爱心/动态水滴效果[原创][5+3时代]

    大风起兮云飞扬,安得猛士兮走四方!html5+css3,不学不行. 做web开发已经有好几年了,见证了太多语言的崛起和陨落. 其实作为一个程序员最苦逼的事情莫过于每天要不停的追赶各大公司新出的框架和语 ...

  6. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  7. jQuery仿3D旋转木马效果插件(带索引按钮)

    项目中需要用到旋转木马效果,但是我在网上找的插件,基本都是不带按钮或者只是带前后按钮的,而项目要求的是带索引按钮,也就是说有3张图片轮播,对应的要有3个小按钮,点击按钮,对应的图片位于中间位置.于是就 ...

  8. HTML5 CSS3 专题 ：诱人的实例 3D展示商品信息

    强化下perspective和transform:translateZ的用法.传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~ 效果图: 说明一 ...

  9. CSS3 实现3D旋转木马效果

    基本原理: 1.首先我们需要让图片能旋转的效果,我们让所有图片绝对定位(position:absolute),共用一个中心点. 2.对于舞台我们加一个视距,比如下面的demo是 perspective ...

随机推荐

  1. 使用IO映射的方式获取tiny4412板子上的ID号

    在以前的文章中,有一篇 基于ARM-contexA9-Linux驱动开发:如何获取板子上独有的ID号 在那篇文章中,具体可以参考.那时候我使用了简单的字符设备驱动框架,最终的ID号通过read方法可将 ...

  2. Markdown语法及编辑器

    宗旨 Markdown 的目标是实现「易读易写」. 可读性,无论如何,都是最重要的.一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成. ...

  3. ruby用来发送互联网邮件

    其实只要你任性的可以,用telnet也是可以发邮件的哦.不过本猫没那么任性,还是用KISS原则来发邮件吧.本篇博文只介绍了如何发邮件,但没涉及收邮件的事,以后如有机会会单独开一篇博文介绍. ruby通 ...

  4. 基于Redis的分布式锁两种实现方式

    最近有一个竞拍的项目会用到分布式锁,网上查到的结果是有三种途径可以实现.1.数据库锁机制,2.redis的锁,3.zookeeper.考虑到使用mysql实现会在性能这一块会受影响,zookeeper ...

  5. ScrollView与ListView嵌套使用，导致ListView下拉失效

    在一次项目开发中,在Scrollv中嵌套进ListView,当触摸ListView范围下拉时,整个展示页面滑动,而不是ListView内容滑动, 也就是说ListView滑动事件被ScrollView ...

  6. jQuery live()方法使用及变更（事件委托）

    根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法.并建议在以后的代码中使用on方法来替代. on方法可以接受三个参数:事件名.触发选择器.事件函数. 需要特别 ...

  7. 乐学习知选择--我的J2EE技术历程

    转眼换工作已经两个多月了,转眼今年已经到9月份了,转眼女朋友也来到了自己身边.有太多的转眼,如今在这个经理不在的早晨,可以肆意的点点这里看看那里,想想自己,有点吉利思的感觉. 这两个多月,知道了什么叫 ...

  8. java日期操作常用工具

    java日期操作常用工具 package com..util; import java.sql.Timestamp; import java.text.SimpleDateFormat; import ...

  9. java——内部类

    内部类:将一个类定义在另一个类的里面,对里面那个类就称为内部类.内部类的访问特点: 1,内部类可以直接访问外部类的成员. 2,外部类要访问内部类,必须建立在内部类的对象.什么时候用? 一般用于类的设计 ...

  10. python---内置函数，匿名函数，嵌套函数，高阶函数，序列化

    函数简单说明 # 函数即"变量" # 高阶函数 # a.把一个函数名当做实参传给另一个函数(在不修改被装饰函数的源代码的情况下,为其添加功能) # b.返回值中包含函数名(不修改函 ...