css3动画效果：3 3D动画

立方体旋转动画效果

css

         #container{
           width: 400px;
           height: 400px;
           -webkit-perspective:;
           perspective:;
           -webkit-perspective-origin:50% 225px;
           perspective-origin:50% 225px;         

         }
         #stage{
           width: 300px;
           height:300px;

           -webkit-transition: -webkit-transform 2s;
                   transition: transform 2s;
           -webkit-transform-style: preserve-3d;
           transform-style: preserve-3d;          

         }
         #shape{
           width: 200px;
           height:200px;
           position: relative;
           top: 100px;
           margin:0 auto;
           transform-style: preserve-3d;
         }
         #shape{
             -webkit-animation: spin 8s infinite linear;

         }
         .plane{
             position: absolute;
             width: 200px;
             height:200px;
             background: #c23c00;
             border: 1px solid #000;
             font-size: 100px;
             color:#fff;
             text-align: center;
             line-height: 200px;
             -webkit-transition: -webkit-transform 2s, opacity 2s;
             transition: transform 2s, opacity 2s;
             -webkit-backface-visibility: hidden;
             backface-visibility: hidden;
           }
           #shape.backface .plane{
             -webkit-backface-visibility: visible;
             backface-visibility: visible;
           }

           .cube>.one{
             opacity: 0.5 ;
             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
             transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px)
           }
           .cube>.two{
             opacity: 0.5 ;
             -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
             transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
           }
           .cube>.three{
             opacity: 0.5 ;
             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
             transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
           }
           .cube > .four{
             opacity: 0.5 ;
             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
             transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
           }
           .cube > .five{
             opacity: 0.5 ;
             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
             transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
           }
           .cube > .six{
             opacity: 0.5 ;
             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);
             transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);
           }
         @-webkit-keyframes spin{
           0% {
              -webkit-transform : rotateY(0);
              transform : rotateY(0);
             }
           100% {
             -webkit-transform : rotateY(-360deg);
              transform : rotateY(-360deg);
           }
         }
         @keyframes spin{
            0% {
              -webkit-transform : rotateY(0);
              transform : rotateY(0);
             }
           100% {
             -webkit-transform : rotateY(-360deg);
              transform : rotateY(-360deg);
           }
         }

perspective:视距

 transform-style: preserve-3d; 3d动画必须，且放在父元素上

translateZ(100px) （100px是高度的一半）
动画加在shape上（.cube的父级，则整体都会旋转）

html

<div id="container" >
       <div id="stage">
         <div id="shape" class="cube backface">
            <div class="plane one">1</div>
            <div class="plane two">2</div>
            <div class="plane three">3</div>
            <div class="plane four">4</div>
            <div class="plane five">5</div>
            <div class="plane six">6</div>
         </div>
       </div>
</div>