css3 3D旋转正方体

再来一个3D的案例，本实例自谷歌，技术自然不用说了，那是一级棒。个人能力有限，我就挑简单的分析下呵呵。说下这个正方体的实现吧，先设置父级元素的transform-style:preserve-3d，然后定义各个面的宽高及绝对定位并设置scale3D为1.2倍，最后就是把各个面分别运用rotateX，rotateY，再运用translateZ拉开距离。至于旋转的运动则是设置父元素的animation从0到360deg的旋转。既然是google的案例，那肯定不支持火狐啊，不过只要换个前缀火狐也不是问题吧。

demodownload

css3主要代码：

 #container {
      width: 100%;
      height: 700px;
      -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      -webkit-perspective-origin: 50% 225px;
    }
    #stage {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 2s;
      -webkit-transform-style: preserve-3d;
    }
    
    #shape {
      position: relative;
      top: 160px;
      margin: 0 auto;
      height: 200px;
      width: 200px;
      -webkit-transform-style: preserve-3d;
    }
    
    .plane {
      position: absolute;
	  left:0;
	  top:0;
      height: 200px;
      width: 200px;
      border: 1px solid white;
      -webkit-border-radius: 12px;
      -webkit-box-sizing: border-box;
      text-align: center;
      font-family: Times, serif;
      font-size: 124pt;
      color: black;
      background-color: rgba(255, 255, 255, 0.6);
      -webkit-transition: -webkit-transform 2s, opacity 2s;
      -webkit-backface-visibility: hidden;
    }

    #shape.backfaces .plane {
      -webkit-backface-visibility: visible;
    }
    
    #shape {
      -webkit-animation: spin 8s infinite linear;
    }

    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(-360deg); }
    }

    /* ---------- cube styles ------------- */
    .cube > .one {
      opacity: 0.5;
      -webkit-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);
    }

    .cube > .three {
      opacity: 0.5;
      -webkit-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);
    }

    .cube > .five {
      opacity: 0.5;
      -webkit-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) rotate(180deg);
    }

demodownload

查看更多：http://www.webkit.org/blog-files/3d-transforms/poster-circle.html

nike free run 5.0 basketball