HTML5 CSS3 诱人的实例： 3D立方体旋转动画

效果图：

知识点：

1、perspective ，transform 的复习

2、css3 backgroud实现格格背景，即面上的小格格

3、 @-webkit-keyframes 实现动画

HTML：

前面的3D商品展示中已经说过如何制作正方体，并且那个上面还有数字，理论上说比这个复杂，虽然木有这个炫~这里就不多说了。

CSS：

html

{

background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);

background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);

height: 100%;

}

.stage

{

-webkit-perspective: 1000px;

width: 20em;

height: 20em;

left: 50%;

top: 50%;

margin-left: -10em;