html
<div class="wrapper">
<div class="box">
<div class="cube">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="cube blue">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="box">
<div class="cube blue">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="cube">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
*{
margin:0;
padding: 0;
}
html,body{
width:100%;
height:100%;
}
.wrapper{
width:100%;
height:100%;
background-color: #cc0019;
display: flex;
justify-content: center;
align-items: center;
/* 3D元素需要空间 :景深 */
perspective: 1000px;
}
.wrapper .cube{
position: relative;
width: 100px;
height:100px;
margin: 30px;
border: 1px solid #000;
/* 3D元素 给父级设置景深*/
transform-style: preserve-3d;
/* 看透视的正方体 */
transform: rotateX(10deg) rotateY(-15deg);
}
.wrapper .cube .item{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 3px solid #fff;
background-color: rgba(255,255,255,0.5);
/* 为防止宽高就为我们设置的 */
box-sizing: border-box;
}
/* 设置盒子的每个面 往屏幕里转:正 屏幕外:负 */
/* 前 */
.wrapper .cube .item:nth-of-type(1){
transform: translateZ(50px);
}
/* 右 */
.wrapper .cube .item:nth-of-type(2){
transform: rotateY(90deg) translateZ(50px);
}
/* 后 */
.wrapper .cube .item:nth-of-type(3){
transform: translateZ(-50px);
}
/* 左 */
.wrapper .cube .item:nth-of-type(4){
transform: rotateY(-90deg) translateZ(50px);
}
/* 上 */
.wrapper .cube .item:nth-of-type(5){
transform: rotateX(90deg) translateZ(50px);
}
/* 下 */
.wrapper .cube .item:nth-of-type(6){
transform: rotateX(-90deg) translateZ(50px);
}
展示效果: