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);
}
