css3立方体3d旋转,css3 3D旋转正方体

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

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);

}