css3d画一个正方体

html部分

<div id="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

style部分

#box div{
    position: absolute;
    height:160px;
    width: 160px;
    border:3px solid #000;
    background: rgba(255,200,100,0.8);
    text-align:center;
    font-size: 130px;
}
#box{
    width: 160px;
    height: 160px;
    margin:100px auto;
    -webkit-transform-style:preserve-3d;
    -webkit-transform-origin:80px 80px 0;
    -webkit-perspective:140px;
}
#box>div:nth-child(1){
        -webkit-transform: translateZ(80px);
}
#box>div:nth-child(2){
        transform: rotateX(90deg) translateZ(-80px);
}
#box>div:nth-child(3){
        transform: rotateX(90deg) translateZ(80px);
}
#box>div:nth-child(4){
        transform: rotateY(90deg) translateZ(80px);
}
#box>div:nth-child(5){
        transform: rotateY(90deg) translateZ(-80px);
}
#box>div:nth-child(6){
        transform: translateZ(-80px);
}

下面是正方形截图

正方形截图

参考文档:

https://blog.pfan123.com/2016/10/26/CSS3D-Transform-style%E5%92%8CPerspective%E5%B1%9E%E6%80%A7/