html5制作旋转正方体,html5—旋转立方体

选装动画

*{box-sizing: border-box;}

html{

background-color: gold;

}

body{

height: 20em;

width: 20em;

left: 50%;

top: 50%;

position: absolute;

margin: -10em 0 0 -10em;

perspective: 2000px;

}

#cube{

animation: 10s spin linear infinite;

transform-style: preserve-3d;

position: absolute;

height: 100%;

width: 100%;

}

#cube *{

height: 20em;

width:20em;

background-color: rgba(0,0,0,0.6);

position: absolute;

border:15px solid rosybrown;

}

@keyframes spin{

from{transfrom:rotateX(0deg) rotateY(0deg);}

to{transform: rotateX(360deg) rotateY(360deg);}

}

#front{transform: rotateY(0deg) translateZ(10em);}

#left{transform: rotateY(90deg) translateZ(-10em);}

#right{transform: rotateY(90deg) translateZ(10em);}

#top{transform: rotateX(90deg) translateZ(10em);}

#bottom{transform: rotateX(90deg) translateZ(-10em);}

#back{transform: rotateY(0deg) translateZ(-10em);}

放右上角一个试验一下，不知道是否要根据浏览器写不同的CSS？