CSS 3D 立方体
在本简短教程中，我将向您展示使用 CSS 创建 3D 立方体是多么容易。
HTML
在这个HTML文件中，我们有一个id为wrapper的父div，以及一个class为cube的子div 。最后，我们有六个子div，分别代表立方体的六个阶段。
<div id="wrapper">
<div class="cube">
<!--Front-->
<div></div>
<!--Back-->
<div></div>
<!--Left-->
<div></div>
<!--Right-->
<div></div>
<!--Top-->
<div></div>
<!--Bottom-->
<div></div>
</div>
</div>
CSS
在 CSS 中，首先，我们通过定位父 div 的 id #wrapper来设置其样式，并通过定位子 div 的 class .cube来设置其样式。
对于 wrapper，我们将其宽度和高度设置为 300px，并将外边距设置为 100px auto，以便将 div 放置在页面中心，并距离顶部 100px。
对于一个立方体，我们将其位置设置为相对定位，宽度和高度均设置为 150 像素。我们还对其 X 轴和 Y 轴应用一定程度的旋转，使其看起来像一个 3D 物体。
#wrapper{
width:300px;
height:300px;
perspective:700px;
-webkit-perspective:700px;
margin:100px auto;
}
.cube{
position:relative;
width:150px;
height:150px;
transform-style:preserve-3d;
transform:rotateY(35deg) rotatex(-38deg);
}
以上两种样式中，我们有 2 个新属性，允许我们在浏览器中创建 3D 空间。
透视效果可以在浏览器中创建三维空间。数值越低，三维深度越大。
我们使用 transform-style，这是一个常见的属性，但我们将其值设置为preserve-3d ，这将把.cube的所有子元素都设置到 3D 空间中。
接下来是我们要制作的3D立方体的最后一部分。
.cube div{
position:absolute;
width:150px;
height:150px;
background:rgba(0,0,0,0.1);
}
首先，我们选中所有子 div，并将所有这些 div 的位置设置为绝对定位，然后我们将 div 的高度和宽度设置为 100%，即(150px * 150px)。
将子 div 放置在 Z 轴上
现在我们所有的子div都沿同一Z轴重叠放置。3D空间最棒的地方在于它允许我们将元素放置在不同的Z轴上。
这就是 Z 轴的样子：
现在让我们用 CSS 设置每个子元素的位置，从而构成一个立方体。
.cube div:nth-child(1){
transform:translateZ(75px);
background:#237A57;
}
.cube div:nth-child(2){
transform: rotateX(180deg) translateZ(75px);
background:#005AA7;
}
.cube div:nth-child(3){
transform: rotateY(-90deg) translateZ(75px);
background:#DA4453;
}
.cube div:nth-child(4){
transform:rotateY(90deg) translateZ(75px);
background:#a8c0ff;
}
.cube div:nth-child(5){
transform: rotateX(90deg) translateZ(75px);
background:#fc4a1a;
}
.cube div:nth-child(6){
transform:rotateX(-90deg) translateZ(75px);
background:#f7b733;
}
在这里，我们使用名为nth-child 的伪选择器来定位每个子 div ，并传递要设置样式的 div 的位置。
我们将所有div元素的Z轴设置为75px，也就是立方体宽度的一半，即150/2=75px。设置好所有子元素的Z轴后，我们还使用rotateX和rotateY将每个div元素放置在Z轴上的正确位置，从而形成一个立方体。
如果你不给子 div 元素指定 Z 轴值，那么所有这些 div 元素都会绕同一个 Z 轴（默认为 0）旋转，从而产生上面所示的图像。