HTML5 CSS3 诱人的实例： 3D立方体旋转动画，做了6年的Web前端

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;

margin-top: -10em;

position: absolute;

}

.cube

{

position: absolute;

width: 100%;

height: 100%;

-webkit-transform-style: preserve-3d;

-webkit-transform: rotateX(-20deg) rotateY(-20deg);

}

.cube *

{

background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);

-webkit-background-size: 2.