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">&lt;</a>
        <a href="javascript:;" class="next">&gt;</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>