CSS3 3D动画 transform

今天我来总结一下 CSS3 的 3D 动画。话不多说，直接上代码讲解

一、首先3D 动画的几个重要样式
1.perspective 规定 3D 元素的透视效果。
- perspective:number;
- 元素距离视图的距离（近大远小原理）
2.backface-visibility 定义元素在不面对屏幕时是否可见。
- visible 背面是可见的
- hidden 背面是不可见得
3.transform-style:preserve-3d 使被转换的子元素保留其 3D 转换
4.perspective-origin 定义3D元素所基于的X轴和Y轴。该属性该属性允许您改变 3D 元素的底部位置。

HTML:

<div class="wapr">
    <div id = "container">
        <div class="front" style="background:rgba(230,9,61,0.3);">1</div>
        <div class="back" style="background:rgba(9,35,230,0.3);">2</div>
        <div class="left" style="background:rgba(247,153,6,0.3);">3</div>
        <div class="right" style="background:rgba(46,247,6,0.6);">4</div>
        <div class="top" style="background:rgba(247,6,221,0.6);">5</div>
        <div class="bottom" style="background:rgba(131,6,247,0.6);">6</div>
    </div>
<div>

CSS:

       *{margin:0;padding:0;}
       body{background:#cccccc;overflow: hidden;}
       .wapr{
            width:300px;
            height:300px;
            position:absolute;
            top:20%;
            left:20%;
            perspective:300px;
            -webkit-perspective:300px;
            -moz-perspective:300px;
            -ms-perspective:300px;
            background:url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg);
       }
       #container{ 
            position: absolute;
            top:37%;
            left:37%;
            transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            transform:translateZ(130px) rotate3d(0,0,0,0deg);
            animation:dong 12s linear  infinite;
            -webkit-animation:dong 12s linear  infinite;
       }

       @keyframes dong{
          0%{
             transform:translateZ(130px)  rotate3d(0,0,0,180deg);

          }
          20%{
            transform:translateZ(130px)  rotate3d(1,1,0,360deg);

          }
          40%{
             transform:translateZ(130px)  rotate3d(1,1,0,180deg); 

          }
          60%{
            transform:translateZ(130px)  rotate3d(1,1,0,0deg);
          }
          80%{
            transform:translateZ(130px)  rotate3d(1,1,0,-180deg);
          }
          100%{
            transform:translateZ(130px) rotate3d(0,0,0,-360deg);
          }
       }
       @-webkit-keyframes dong{
          0%{
             transform:translateZ(130px)  rotate3d(0,0,0,180deg);

          }
          20%{
            transform:translateZ(130px)  rotate3d(1,1,0,360deg);

          }
          40%{
             transform:translateZ(130px)  rotate3d(1,1,0,180deg); 

          }
          60%{
            transform:translateZ(130px)  rotate3d(1,1,0,0deg);
          }
          80%{
            transform:translateZ(130px)  rotate3d(1,1,0,-180deg);
          }
          100%{
            transform:translateZ(130px) rotate3d(0,0,0,-360deg);
          }
       }
       #container div{
            width:75px;
            height:75px;
            font-size:30px;
            font-weight: bold;
            text-align: center;
            line-height:75px;
            position:absolute;
            box-sizing:border-box;
            border:2px solid #046902;
            color:white;
       }
       .front{
            transform:translateZ(37.5px);
            -webkit-transform:translateZ(37.5px);
       }
       .back{
            transform:rotateX(180deg) translateZ(37.5px);
            -webkit-transform:rotateX(180deg) translateZ(37.5px);
       }
       .left{
            transform:rotateY(-90deg) translateZ(37.5px);
            -webkit-transform:rotateY(-90deg) translateZ(37.5px);
       }
       .right{
            transform:rotateY(90deg) translateZ(37.5px);
            -webkit-transform:rotateY(90deg) translateZ(37.5px);
       }
       .top{
            transform:rotateX(90deg) translateZ(37.5px);
            -webkit-transform:rotateX(90deg) translateZ(37.5px);
       }
       .bottom{
            transform:rotateX(-90deg) translateZ(37.5px);
            -webkit-transform:rotateX(-90deg) translateZ(37.5px);
       }

源代码：
css3 3D 动画源代码