html设置立方体,css立方体( 原创)

#preserve {

width:200px;

height:200px;

transform-style:preserve-3d;

position:fixed;

top:200px;

left:200px;

/* transform:rotatey(45deg) rotatex(45deg);

*/

animation:rotate 5s infinite alternate;

}

#preserve>div {

width:200px;

height:200px;

position:absolute;

left:0;

top:0;

font-size:80px;

line-height:200px;

text-align:center;

/* opacity:0.5;

*/

}

.one {

background-color:red;

transform:translateZ(100px);

}

.two {

background-color:yellow;

transform:translateZ(-100px);

}

.three {

background-color:green;

transform:rotateX(90deg) translateZ(100px);

}

.four {

background-color:#000;

transform:rotateX(90deg) translateZ(-100px);

}

.five {

background-color:blue;

transform:rotateY(90deg) translateZ(100px);

}

.six {

background-color:blue;

transform:rotateY(90deg) translateZ(-100px);

}

.qq {

background-color:blue;

transform:rotateY(90deg);

}

.bb {

background-color:blue;

transform:rotateX(90deg);

}

@keyframes rotate {

0% {

transform:rotateY(0deg) rotateX(0deg);

}

/* 25% {

transform:rotateY(45deg) rotateX(45deg);

}

50% {

transform:rotateY(90deg) rotateX(90deg);

}

75% {

transform:rotateY(135deg) rotateX(135deg);

}

*/

100% {

transform:rotateY(360deg) rotateX(360deg);

}

}