1. 首先看效果（第一个五颜六色的是透明多个面，第2-3都是只有3个面是我实际需要的，右边的有3个并列的正方体与3个并列的长方体）：
长方体与正方体，所有代码：
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: 100%;
height: 100%;
}
.box {
float: left; margin: 5%; /*只是把两个div放一行，并相隔开*/
width: 200px;
height: 200px;
background-color: skyblue;
/* 在父元素中添加transform-style启用3d空间 */
transform-style: preserve-3d;
/* 在父元素中添加透视效果 */
/* perspective: 200px; */
transform: rotateX(353deg) rotateY(45deg);
}
.item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.top {
background-color: rgba(255, 0, 0, 0.4);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background-color: rgba(0, 255, 0, 0.4);
transform: rotateX(-90deg) translateZ(100px);
}
.front {
background-color: rgba(100, 100, 100, 0.4);
transform: rotateY(0deg) translateZ(100px);
}
.back {
background-color: rgba(100, 100, 100, 0.4);
transform: rotateY(-180deg) translateZ(100px);
}
.left {
background-color: rgb(54 72 211 / 78%);
transform: rotateY(-90deg) translateZ(100px);
}
.right {
background-color: rgba(255, 255, 0, 0.4);
transform: rotateY(90deg) translateZ(100px);
}
.top2 {background-color: #081b61;transform: rotateX(90deg) translateZ(100px) rotatez(58deg); }
.left2 {background-color: #2949bf; transform: rotateY(303deg) translateZ(100px);}
.right2 { background-color: #949aad; transform: rotateY(33deg) translateZ(100px); }
.box1 {
float: left;
margin: 5px;
width: 50px;
height: 50px;
transform-style: preserve-3d;
transform: rotateX(353deg) rotateY(45deg);
}
/*小正方体*/
.top3 {
background-color: #4b598d;
transform: rotateX(90deg) translateZ(23px) rotatez(154deg) rotatey(2deg);
}
.left3 {
background-color: #2949bf;
transform: rotateY(304deg) translateZ(30px);
}
.right3 {
background-color: #5f71a9;
transform: rotateY(23deg) translateZ(27px);
}
</style>
</head>
<body>
<div class="box">
父元素
<div class="item top">top</div>
<div class="item bottom">bottom</div>
<div class="item front">front</div>
<div class="item back">back</div>
<div class="item left">left</div>
<div class="item right">right</div>
</div>
<div class="box">
父元素
<div class="item top2"></div>
<div class="item left2"></div>
<div class="item right2"></div>
</div>
<div class="box">
父元素
<div class="item" style="background-color: #081b61;transform: rotateX(90deg) translateZ(100px) rotatez(49deg);"></div>
<div class="item" style="background-color: #2949bf; transform: rotateY(311deg) translateZ(100px);"></div>
<div class="item" style="background-color: #949aad;transform: rotateY(40deg) translateZ(100px);"></div>
</div>
<div>
<div style="float: left; margin: 5px; width: 50px; height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">
<div class="item top3"></div>
<div class="item left3"></div>
<div class="item right3"></div>
</div>
<div class="box1">
<div class="item top3"></div>
<div class="item left3"></div>
<div class="item right3"></div>
</div>
<div class="box1">
<div class="item top3"></div>
<div class="item left3"></div>
<div class="item right3"></div>
</div>
</div>
<br><br><br>
<div>
<div style="width:80px;float: left; margin: 5px;height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">
<div class="item" style="background-color: #414349;transform:rotateX(94deg) translateZ(26px) translatex(8px) translatey(18px) rotatez(81deg) rotatey(0deg)"></div>
<div class="item" style="background-color: #5275f5;transform:rotateY(313deg) translateZ(2px)"></div>
<div class="item" style="background-color: #2e4495;transform:rotateY(26deg) rotateZ(4deg) translateZ(55px) translateY(-4px)"></div>
</div>
<div style="width:80px;float: left; margin: 5px; height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">
<div class="item" style="background-color: #414349;transform:rotateX(94deg) translateZ(26px) translatex(8px) translatey(18px) rotatez(81deg) rotatey(0deg)"></div>
<div class="item" style="background-color: #5275f5;transform:rotateY(313deg) translateZ(2px)"></div>
<div class="item" style="background-color: #2e4495;transform:rotateY(26deg) rotateZ(4deg) translateZ(55px) translateY(-4px)"></div>
</div>
<div style="width:80px;float: left; margin: 5px; height: 50px; transform-style: preserve-3d;transform: rotateX(353deg) rotateY(45deg);">
<div class="item" style="background-color: #414349;transform:rotateX(94deg) translateZ(26px) translatex(8px) translatey(18px) rotatez(81deg) rotatey(0deg)"></div>
<div class="item" style="background-color: #5275f5;transform:rotateY(313deg) translateZ(2px)"></div>
<div class="item" style="background-color: #2e4495;transform:rotateY(26deg) rotateZ(4deg) translateZ(55px) translateY(-4px)"></div>
</div>
</div>
</body>
</html>
