如何用CSS3创建Webpack风格的立方体Logo，解决旋转和遮挡问题？

用CSS3创建一个Webpack风格的立方体Logo，核心在于使用3D变换构建六个面，并通过合理的旋转与位移顺序来避免面之间的错误遮挡。下面直接看实现方式。

一、HTML结构

我们用一个容器表示场景，内部六个div分别代表立方体的六个面：

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

二、CSS3核心样式

容器需要开启透视，立方体设置transform-style: preserve-3d以保留子元素的3D位置，这是避免平面化遮挡的第一步。

.scene {
  width: 200px;
  height: 200px;
  perspective: 800px;
  margin: 100px auto;
}
.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}
.face {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(135, 206, 250, 0.8);
  border: 2px solid #2c3e50;
}

三、六个面的变换与遮挡处理

解决遮挡问题的关键是：先旋转到对应轴向，再沿Z轴平移一半边长。这样六个面才会正确拼合而不互相穿插。

.front  { transform: rotateY(0deg)   translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg)  translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg)  translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

四、旋转动画

通过关键帧让整个立方体绕X和Y轴匀速转动，由于已保留3D空间，浏览器会自动处理不同面的前后关系。

@keyframes rotate {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}

五、常见遮挡问题排查

• 忘记写transform-style: preserve-3d，导致子面被压平到同一平面。
• translateZ写在rotate之前，使位移方向错误，面穿插重叠。
• 父级设置了overflow:hidden，裁剪掉3D溢出部分。

六、Webpack风格配色

将背景改为Webpack蓝并加内部方块，可更接近原版Logo观感：

.face {
  background: #8ed6fb;
  box-shadow: inset 0 0 40px #2c3e50;
}

按照上述结构，就能用CSS3稳定实现一个可旋转、无错误遮挡的Webpack风格立方体Logo。

CSS3Webpack_logocube_animation修改时间：2026-07-28 05:54:20