css三维盒子代码

CSS中的三维盒子是一种非常有趣的效果，可以为网页增添更多的动态视觉效果。下面是一个CSS三维盒子的代码演示：

.box{
    width: 200px;
    height: 200px;
    position: relative;
    margin: 100px auto;
    transform-style: preserve-3d;
    transition: 1s ease-in-out;
}
.box:hover{
    transform: rotateX(180deg);
}
.box .front{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #1abc9c;
    transform: translateZ(100px);
}
.box .back{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #e74c3c;
    transform: rotateY(180deg) translateZ(100px);
}
.box .right{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #3498db;
    transform: rotateY(90deg) translateZ(100px);
}
.box .left{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #f1c40f;
    transform: rotateY(-90deg) translateZ(100px);
}
.box .top{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #9b59b6;
    transform: rotateX(90deg) translateZ(100px);
}
.box .bottom{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: #2c3e50;
    transform: rotateX(-90deg) translateZ(100px);
} 

上面的代码演示了一个长度、宽度、高度都为200px的三维盒子，可以在鼠标悬停时进行翻转。盒子中包含了六个面，每个面都有不同的颜色，使用了transform属性来让盒子在3D空间里旋转、转换、移动等。