HTML5 纯CSS3实现正方体旋转3D效果(1)，大牛带你直击优秀开源框架灵魂

transform-style: preserve-3d;

position: relative;

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

animation: name 6s linear 100ms infinite;

}

.bb{

position: absolute;

width: 100px;

height: 100px;

left: 0;

right: 0;

background-color: rgba(232,222,45,0.6);

}

.qian{

transform: translateZ(50px);

background-color: rgba(23,22,4,0.6);

}

.hou{

transform: translateZ(-50px);

background-color: rgba(23,122,56,0.6);

}

.zuo{

transform: rotateY(270deg) translateZ(-50px);

background-color: rgba(223,122,74,0.6);

}

.you{

transform: rotateY(270deg) translateZ(50px);

background-color: rgba(13,22,254,0.6);

}

.shang{

transform: rotateX(270deg) translateZ(-50px);

background-color: rgba(223,12,144,0.9);

}