如何用CSS3制作一个内嵌立方体的Webpack Logo

Webpack作为前端常用的构建工具，其标志性的内嵌立方体Logo辨识度很高，我们可以通过CSS3的3D变换属性纯手写实现这个效果，不需要依赖任何图片资源。

实现前的准备知识

要实现3D立方体效果，首先需要了解CSS3的几个核心3D相关属性：

• transform-style: preserve-3d：让子元素保留3D变换空间，默认值是flat，子元素会被压平到父元素的2D平面
• perspective：设置观察者与z=0平面的距离，值越小3D效果越强烈，通常设置在800px到1200px之间
• transform的3D变换函数：translate3d(x,y,z)、rotateX(angle)、rotateY(angle)、rotateZ(angle)等

基础HTML结构搭建

我们需要一个外层容器作为3D场景，一个中层容器作为立方体的旋转载体，内部6个子元素分别对应立方体的6个面，同时还需要内嵌的小立方体结构。

<div class="webpack-logo">
  <!-- 外层大立方体 -->
  <div class="cube outer-cube">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face left"></div>
    <div class="face right"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
    <!-- 内嵌小立方体 -->
    <div class="cube inner-cube">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face left"></div>
      <div class="face right"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
    </div>
  </div>
</div>

核心CSS样式编写

3D场景基础设置

首先给外层容器设置透视效果，让内部的3D变换能够正常呈现。

.webpack-logo {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  /* 设置透视距离，让3D效果更自然 */
  perspective: 1000px;
}

.cube {
  position: relative;
  width: 100%;
  height: 100%;
  /* 保留子元素的3D空间 */
  transform-style: preserve-3d;
  /* 初始旋转角度，让立方体正面朝向用户 */
  transform: rotateX(-15deg) rotateY(15deg);
  /* 添加旋转动画 */
  animation: rotate 8s linear infinite;
}

立方体面的通用样式

所有立方体面的基础样式一致，通过不同的变换属性放置到对应的位置。

.face {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 半透明背景，方便观察内嵌结构 */
  background: rgba(142, 210, 255, 0.7);
  border: 2px solid #1d78c1;
  box-sizing: border-box;
}

/* 大立方体各个面的位置变换 */
.outer-cube .front {
  transform: translateZ(100px);
}
.outer-cube .back {
  transform: translateZ(-100px) rotateY(180deg);
}
.outer-cube .left {
  transform: translateX(-100px) rotateY(-90deg);
}
.outer-cube .right {
  transform: translateX(100px) rotateY(90deg);
}
.outer-cube .top {
  transform: translateY(-100px) rotateX(90deg);
}
.outer-cube .bottom {
  transform: translateY(100px) rotateX(-90deg);
}

内嵌小立方体实现

内嵌的小立方体尺寸是大立方体的一半，位置需要居中放置在大立方体内部，同时颜色要和大立方体做出区分。

.inner-cube {
  width: 50%;
  height: 50%;
  /* 让小立方体居中 */
  top: 25%;
  left: 25%;
  /* 小立方体反向旋转，形成内嵌错落的效果 */
  transform: rotateX(15deg) rotateY(-15deg);
  /* 小立方体不跟随大立方体旋转，单独设置动画 */
  animation: inner-rotate 4s linear infinite reverse;
}

/* 小立方体面的颜色区分 */
.inner-cube .face {
  background: rgba(29, 120, 193, 0.7);
  border-color: #0d4d7a;
}

/* 小立方体各个面的位置变换，尺寸是大立方体的一半，所以Z轴偏移是50px */
.inner-cube .front {
  transform: translateZ(50px);
}
.inner-cube .back {
  transform: translateZ(-50px) rotateY(180deg);
}
.inner-cube .left {
  transform: translateX(-50px) rotateY(-90deg);
}
.inner-cube .right {
  transform: translateX(50px) rotateY(90deg);
}
.inner-cube .top {
  transform: translateY(-50px) rotateX(90deg);
}
.inner-cube .bottom {
  transform: translateY(50px) rotateX(-90deg);
}

动画定义

给大小立方体分别添加旋转动画，让Logo呈现动态效果，符合Webpack Logo的官方展示风格。

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

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

效果调整与优化

如果觉得3D效果不够明显，可以调整perspective的数值，数值越小3D纵深感越强。如果想要静态展示，可以删除animation相关属性。另外可以通过调整translateZ的数值改变立方体的厚度，让内嵌结构的比例更符合官方Logo的样式。

这种实现方式的优势是完全基于CSS3，不需要加载任何图片资源，性能更好，而且可以通过CSS变量轻松调整颜色、尺寸和动画速度，适配不同的使用场景。

CSS3Webpack_Logo3D_transform内嵌立方体animation修改时间：2026-07-17 17:15:35