1.Web前端之CSS3中3D立方体以及3D轮播图
1.3D坐标系
3D坐标可以用左手来模拟，其中大拇指方向默认是X轴正方向，食指方向是Y轴正方向，中指方向是Z轴正方向。注意：当设置transform：rotateX（90deg）时，相当于将X轴转动90°，此时Z轴正方向向上，所以设置transform：translateZ(150px)时，就产生了3D立方体的上面，具体原理可以通过chrome浏览器审查元素来调试。
2.3D视图
transform-style：flat(默认，二维效果) / preserve-3d(三维效果)。设置一个元素的transform-style:preserve-3d；只影响这个元素的子元素(如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。这样所有子元素都可以相对与父元素的平面进行3d变形操作。和二维变形一样，三维变形可以使用transform属性来设置。可以通过制定的函数或者通过三维矩阵来对元素变型。列举几个函数：
translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;
scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleY()。
rotateX(angle) 是元素依照x轴旋转；
rotateY(angle) 是元素依照y轴旋转；
rotateZ(angle) 是元素依照z轴旋转。
3.perspective和transform-style的设置问题
（1）当设置perspective(length);不设置transform-style:preserve-3d；当元素静止时，会有立体的效果：
（2）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：
（3）当设置transform-style:preserve-3d；不设置perspective(length);当元素静止时，不会有立体的效果：
（4）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：
注意：（1）如果一个元素以x轴或y轴旋转90度以上的话，那么它的背面将面向用户。背面的元素始终是透明的，所以用户通过后面看到正面的反向形态，就像是从在玻璃门后面看对外张贴的标志。为了防止显示镜像的前面。可以将backface-visibility设置为hidden;如果backface-visibility:hidden;那么这个元素就不会在背面可见了。这么做的一个原因就是，想一个元素有两个面，就像一个扑克牌。比如：创建一张扑克牌，正面和背面一定不一样，这两个面的位置是背靠背的。这两个元素一起转动，正面逐步向后反转隐藏，同时背面向前反转并出现。如果背面的元素是可见的，旋转时它将掩盖它底下的元素，而不是露出它下面的元素。
（2）如果父元素设置overflow：hidden；那么子元素就无法跳出父元素的平面，也就不能出现3D效果。就如同，transform-style：flat；
3.自己做得3D立方体
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} .box{ width: 200px; height: 200px; margin: 100px auto; font-size: 30px; color:red; line-height: 200px; position: relative; text-align: center; perspective:1000px; transform-style: preserve-3d; transform:rotateX(-30deg) rotateY(30deg); } .front, .back, .left, .right, .top, .bottom{ width: 100%; height: 100%; opacity: 0.5; position: absolute; left: 0; top: 0; } .front{ background-color: pink; transform: translateZ(100px); } .back{ background-color: orange; transform: translateZ(-100px); } .left{ background-color: blue; transform: rotateY(-90deg) translateZ(100px); } .right{ background-color: red; transform: rotateY(90deg) translateZ(100px); } .top{ background-color: green; transform: rotateX(-90deg) translateZ(-100px); } .bottom{ background-color: yellowgreen; transform: rotateX(-90deg) translateZ(100px); } </style> </head> <body> <div class="box"> <div class="front">front</div> <div class="back">back</div> <div class="left">left</div> <div class="right">right</div> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html>
4.详细说明参照原地址
http://www.cnblogs.com/duanhuajian/archive/2012/08/30/2664026.html
5.扩展内容
有了3D的原理，我们就可以实现3D轮播图动画效果了，原理就是每个li标签有4个面，分别是前 、后、 上、下，相当于剔除了3D立方体的左右两面，再将每个li标签添加过渡动画：transition:all 1s linear;并且每个li之间必须有延时操作，代码中的图片自己可以从网上下载，但是注意图片的大小跟盒子的大小要匹配，具体参照如下源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D轮播图</title> <style> html,body{ height: 100%; } body{ margin: 0; padding: 0; background-color: #F7F7F7; } .banner{ width: 560px; height: 300px; margin: 100px auto; border: 1px solid #CCC; position: relative; } ul{ list-style: none; margin: 0; padding: 0; height: 100%; } li{ position: absolute; top: 0; width: 112px; height: 100%; background-color: green; transform: rotateX(0deg); transform-style: preserve-3d; transition: all 1s; } li:nth-child(1){ left: 0; } li:nth-child(2){ left: 112px; } li:nth-child(3){ left: 224px; } li:nth-child(4){ left: 336px; } li:nth-child(5){ left: 448px; } span{ display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0; } li span:nth-child(1){ transform: translateZ(150px); background-image: url(images/1.jpg); } li span:nth-child(2){ transform: rotateX(90deg) translateZ(150px); background-image: url(images/2.jpg); } li span:nth-child(3){ transform: rotateX(180deg) translateZ(150px); background-image: url(images/3.jpg); } li span:nth-child(4){ transform: rotateX(270deg) translateZ(150px); background-image: url(images/4.jpg); } li:nth-child(1) span{ background-position: 0 0; } li:nth-child(2) span{ background-position: -112px 0; } li:nth-child(3) span{ background-position: -224px 0; } li:nth-child(4) span{ background-position: -336px 0; } li:nth-child(5) span{ background-position: -448px 0; } .prev, .next{ display: block; width: 60px; height: 60px; text-align: center; line-height: 60px; font-size: 40px; color: #FFF; text-decoration: none; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 50%; margin-top: -30px; } .next { right: 0; } </style> </head> <body> <div class="banner"> <ul> <li> <span></span> <span></span> <span></span> <span></span> </li> <li> <span></span> <span></span> <span></span> <span></span> </li> <li> <span></span> <span></span> <span></span> <span></span> </li> <li> <span></span> <span></span> <span></span> <span></span> </li> <li> <span></span> <span></span> <span></span> <span></span> </li> </ul> <a href="javascript:;" class="prev"><</a> <a href="javascript:;" class="next">></a> </div> <script src="jquery.min.js"></script> <script> var current = 0; $('.prev').on('click',function(){ current--; $('li').each(function(key){ $(this).css({ 'transform':'rotateX('+current*90+'deg)', 'transition-delay':key*0.25+'s' }); }); }); $('.next').on('click',function(){ current++; $("li").each(function(key){ $(this).css({ 'transform':'rotateX('+(-current)*90+'deg)', 'transition-delay':key*0.25+'s' }); }); }); </script> </body> </html>
