立方体旋转动画效果

css

  1         #container{
  2           width: 400px;
  3           height: 400px;
  4           -webkit-perspective:800;
  5           perspective:800;
  6           -webkit-perspective-origin:50% 225px;
  7           perspective-origin:50% 225px;         
  8 
  9         }
 10         #stage{
 11           width: 300px;
 12           height:300px;
 13 
 14           -webkit-transition: -webkit-transform 2s;
 15                   transition: transform 2s;
 16           -webkit-transform-style: preserve-3d;
 17           transform-style: preserve-3d;          
 18 
 19         }
 20         #shape{
 21           width: 200px;
 22           height:200px;
 23           position: relative;
 24           top: 100px;
 25           margin:0 auto; 
 26           transform-style: preserve-3d;
 27         }
 28         #shape{
 29             -webkit-animation: spin 8s infinite linear;
 30 
 31         }
 32         .plane{
 33             position: absolute;
 34             width: 200px;
 35             height:200px;
 36             background: #c23c00;
 37             border: 1px solid #000;
 38             font-size: 100px;
 39             color:#fff;
 40             text-align: center;
 41             line-height: 200px;
 42             -webkit-transition: -webkit-transform 2s, opacity 2s;
 43             transition: transform 2s, opacity 2s;
 44             -webkit-backface-visibility: hidden;
 45             backface-visibility: hidden;
 46           }
 47           #shape.backface .plane{
 48             -webkit-backface-visibility: visible;
 49             backface-visibility: visible;
 50           }
 51 
 52           .cube>.one{
 53             opacity: 0.5 ;
 54             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
 55             transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px)
 56           }
 57           .cube>.two{
 58             opacity: 0.5 ;
 59             -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
 60             transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
 61           }
 62           .cube>.three{
 63             opacity: 0.5 ;
 64             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
 65             transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
 66           }
 67           .cube > .four{
 68             opacity: 0.5 ;
 69             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
 70             transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
 71           }
 72           .cube > .five{
 73             opacity: 0.5 ;
 74             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
 75             transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
 76           }
 77           .cube > .six{
 78             opacity: 0.5 ;
 79             -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);
 80             transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);
 81           }
 82         @-webkit-keyframes spin{
 83           0% {
 84              -webkit-transform : rotateY(0);
 85              transform : rotateY(0);
 86             }
 87            {
 88             -webkit-transform : rotateY(-360deg);
 89              transform : rotateY(-360deg);
 90           }
 91         }
 92         @keyframes spin{
 93            0% {
 94              -webkit-transform : rotateY(0);
 95              transform : rotateY(0);
 96             }
 97            {
 98             -webkit-transform : rotateY(-360deg);
 99              transform : rotateY(-360deg);
100           }
101         }

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>