3d长方体

html

<div class="main">
    <div class="a1">1</div>
    <div class="a2">2</div>
    <div class="a3">3</div>
    <div class="center"></div>
    <div class="a4">4</div>
    <div class="a5">5</div>
    <div class="a6">6</div>
</div>

css

    div.main{
       width: 300px;
       height: 300px;
       margin: 100px auto;
       perspective: 600px;/*3D元素距视图的距离，子元素会获得透视效果*/
       perspective-origin: -100% 50%;/*3D元素所基于的X轴和Y轴*/
       transform-style: preserve-3d;/*如何在 3D 空间中呈现被嵌套的元素。*/
    }
    div *{
       width: 300px;
       height: 300px;
       line-height: 300px;
       position: absolute;
       text-align: center;
       font-size: 100px;
    }
    div.center{
       border: red 1px dashed;
    }
    div.a1{
       background-color: rgba(209, 89, 255, 0.42);
       transform: translateZ(150px);
    }
    div.a2{
       background-color: rgba(95, 255, 195, 0.42);
       transform: translateZ(-150px);
       /*translateZ()：X平移，rotateY()：Y旋转*/
    }
    div.a3{
       background-color: rgba(255, 158, 85, 0.42);
       transform: translateX(150px) rotateY(90deg);
    }
    div.a4{
       background-color: rgba(255, 146, 249, 0.42);
       transform: translateX(-150px) rotateY(90deg);
    }
    div.a5{
       background-color: rgba(82, 31, 255, 0.42);
       transform: translateY(150px) rotateX(90deg);
    }
    div.a6{
       background-color: rgba(166, 255, 56, 0.42);
       transform: translateY(-150px) rotateX(90deg);
    }