CSS3画旋转的正方体

在开始前，首先介绍，3d坐标系

然后介绍两个关键的KEY words.

• 3D试图，即transform-style：flat(默认，二维效果) / preserve-3d(三维效果)
• 透视/景深效果，即perspective(length) 为一个元素设置三维透视的距离

下面根据具体代码实例进行讲解。首先是html代码

        

            

                
1

                
2
                
3
                
4
                
5
                
6
            
        
        
    

 body {
      background-color: #000;
    }
    .container {
      width: 100%;
      height: 800px;
      -webkit-perspective: 800;
      padding-top: 300px;
      //默认景深的中心点，为50% 50%;
      -webkit-perspective-origin: 50% 40%;
    }
    @-webkit-keyframes spin {
      from {
        -webkit-transform: rotateY(0);
      }
      to {
        -webkit-transform: rotateY(-360deg);
      }
    }
    .cube {
      margin: 0 auto;
      width: 200px;
      height: 200px;
      position: relative;
      -webkit-animation: spin 8s infinite linear;
      -webkit-transform-style: preserve-3d;
    }
    .cube .rect {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 200px;
      height: 200px;
      border-radius: 5px;
      border: 1px solid #ccc;
      font-size: 125pt;
      text-align: center;
      line-height: 200px;
      background-color: #bbb;
      opacity: 0.5;
    }
    .cube .cubeA {
      //这里要放大1.2倍。比较好看。
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
    }
    .cube .cubeB {
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px);
    }
    .cube .cubeC {
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
    }
    .cube .cubeD {
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
    }
    .cube .cubeE {
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
    }
    .cube .cubeF {
      -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
    }

  PS...想看完整效果， TOUCHME