CSS3画旋转的立方体

CSS3画旋转的正方体

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

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

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

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

   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