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{
	    300px;
	   height: 300px;
	   margin: 100px auto;
	   perspective: 600px;/*3D元素距视图的距离，子元素会获得透视效果*/
	   perspective-origin: -100% 50%;/*3D元素所基于的X轴和Y轴*/
	   transform-style: preserve-3d;/*如何在 3D 空间中呈现被嵌套的元素。*/
	}
	div *{
	    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);
	}