如何使用纯CSS创建3D Box立方体效果

参考效果图：

实现思路：通过CSS 3D变换属性构建立方体6个面的空间位置，给每个面统一设置白色背景、黑色边框即可，以下是可直接运行的完整代码：

HTML结构 #

<div class="cube-container">
  <div class="cube">
    <div class="cube-face front"></div>
    <div class="cube-face back"></div>
    <div class="cube-face left"></div>
    <div class="cube-face right"></div>
    <div class="cube-face top"></div>
    <div class="cube-face bottom"></div>
  </div>
</div>

CSS样式 #

/* 3D场景容器 */
.cube-container {
  perspective: 1000px;
  width: 200px;
  height: 200px;
  margin: 50px auto;
}
/* 立方体容器 */
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  /* 调整旋转角度可修改立方体展示视角 */
  transform: rotateX(-20deg) rotateY(30deg);
  transition: transform 0.5s ease;
}
/* 立方体通用面样式 */
.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #ffffff;
  border: 1px solid #000000;
  box-sizing: border-box;
}
/* 前面 */
.front {
  transform: translateZ(100px);
}
/* 后面 */
.back {
  transform: rotateY(180deg) translateZ(100px);
}
/* 左面 */
.left {
  transform: rotateY(-90deg) translateZ(100px);
}
/* 右面 */
.right {
  transform: rotateY(90deg) translateZ(100px);
}
/* 顶面 */
.top {
  transform: rotateX(90deg) translateZ(100px);
}
/* 底面 */
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

/* 可选效果：鼠标悬浮时立方体自动旋转展示全角度 */
.cube:hover {
  animation: rotateCube 3s infinite linear;
}
@keyframes rotateCube {
  from {
    transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-20deg) rotateY(360deg);
  }
}

注意事项 #

• 所有面的translateZ位移距离必须是立方体边长的1/2，修改立方体尺寸时同步调整该数值即可
• 必须给立方体容器设置transform-style: preserve-3d属性，否则3D效果无法生效
• perspective属性控制3D透视的远近，数值越小立体感越强

内容的提问来源于stack exchange，提问作者fxfuture