让我们创建一个 CSS 立方体
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
CSS transform 功能非常强大！本文将介绍如何制作一个 3D 立方体。
首先，我们来创建标记：
<div class="container">
<div class="cube">
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
<div class="face left">Left</div>
<div class="face right">Right</div>
<div class="face front">Front</div>
<div class="face back">Back</div>
</div>
</div>
立方体的每个面都是一个独立的div元素。让我们创建一些初始样式：
.container {
width: 200px;
height: 200px;
perspective: 500px;
margin: 100px;
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.face {
width: 200px;
height: 200px;
background: skyblue;
border: 2px solid black;
position: absolute;
opacity: 0.5;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 2rem;
}
我们对立方体的各个面进行了一些样式设置，并将它们绝对定位，使它们彼此重叠。首先，我们将旋转每个面，使其朝向正确的方向。下一步是将每个面从立方体的中心向边缘移动。
以下是我们目前掌握的信息：
我们目前正面观察的是立方体。如果我们稍微旋转一下“相机”，观察起来会更容易。让我们rotate3d给立方体添加一个变换：
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transform: rotate3d(1, 1, 0, 45deg);
}
现在这些元素旋转了一定角度，这样我们就能更好地看到3D结构了：
我们先来处理正面。我们的立方体尺寸为 200px x 200px x 200px。目前所有元素都位于立方体的正中心。正面方向已经正确，我们只需要将其向外移动 100px，使其位于前边缘。让我们为正面添加一条新规则并将其向外移动：
.front {
transform: translateZ(100px);
}
现在立方体的正面已经就位：
接下来是背面。它已经位于正确的平面上，但我们需要绕 y 轴旋转 180 度，使文字朝外。与正面一样，我们也需要将其向外移动 100 像素：
.back {
transform: translateZ(-100px) rotateY(180deg);
}
背面现在处于正确位置：
接下来我们处理左右两侧。它们需要绕 y 轴旋转 90 度，使它们分别朝外。左侧需要旋转 -90 度。
然后需要将它们沿 x 轴移动到立方体的边缘：
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
最后，我们需要调整顶部和底部的位置。它们需要绕 x 轴旋转 90 度，使它们分别朝上和朝下。同样，顶部需要旋转 90 度，底部需要旋转 -90 度，这样文字方向才正确。
.top {
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
transform: translateY(100px) rotateX(-90deg);
}
看起来像个立方体！
为了展示我们的新立方体，让我们给它加上一个旋转动画：
@keyframes turn {
from { transform: rotate3d(0, 0, 0, 0); }
to { transform: rotate3d(1, 1, 0, 360deg); }
}
.cube {
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
animation: turn 5s linear infinite;
}
最后，我们还要考虑可访问性。如果用户在其操作系统中禁用了动画，我们就不要对立方体进行动画处理，而是像之前那样以 45 度角显示它：
@media (prefers-reduced-motion: reduce) {
.cube {
animation: none;
transform: rotate3d(1, 1, 0, 45deg);
}
}
以下是 CodePen 中的最终效果：
你喜欢这篇文章吗？想了解更多 CSS 知识，请关注我的新书《现代 CSS》！
文章来源：https://dev.to/joeattardi/let-s-make-a-css-cube-1fed