css3画一个立方体 |css考试知识点

/*设置立方体容器*/
.box{
width: 300px;
height: 300px;
perspective: 800px;
perspective-origin:50% 50%;
}
/*设置立方体六面*/
.front, .back, .left, .right, .top, .bottom{
position: absolute;
width: 300px;
height: 300px;
opacity: 0.7;
}
/*设置立方体各个面的位置、颜色和旋转*/
.front{
background-color: #f00;
transform: rotateY(0deg) translateZ(150px);
}
.back{
background-color: #0f0;
transform: rotateY(180deg) translateZ(150px);
}
.left{
background-color: #00f;
transform: rotateY(-90deg) translateZ(150px);
}
.right{
background-color: #ff0;
transform: rotateY(90deg) translateZ(150px);
}
.top{
background-color: #f0f;
transform: rotateX(90deg) translateZ(150px);
}
.bottom{
background-color: #0ff;
transform: rotateX(-90deg) translateZ(150px);
}
/*设置鼠标悬停时立方体的旋转*/
.box:hover .front{
transform: rotateY(90deg) translateZ(150px);
}
.box:hover .back{
transform: rotateY(270deg) translateZ(150px);
}
.box:hover .left{
transform: rotateY(180deg) translateZ(150px);
}
.box:hover .right{
transform: rotateY(0deg) translateZ(150px);
}
.box:hover .top{
transform: rotateX(270deg) translateZ(150px);
}
.box:hover .bottom{
transform: rotateX(90deg) translateZ(150px);
}

以上就是画一个立方体的具体实现，通过一些简单的CSS3属性，大家能够轻松实现一个美观的立方体效果。