如何用CSS3高效实现Webpack Logo的三维立体效果？

提问者提供的HTML结构试图通过两个

元素分别构建外层和内层盒子，这种方式在旋转时会因为元素层叠顺序和渲染顺序导致遮盖效果异常。 此外，通过调整
• 元素的样式来控制边框粗细也较为繁琐且不易维护。

  更简洁高效的方案是采用三维立方体模型，利用CSS3的transform-style: preserve-3d;属性和transform属性来实现旋转和层叠效果。 我们可以用六个

  元素分别代表立方体的六个面，通过设置每个面的transform属性来确定其空间位置。

  以下代码展示了如何构建内外两个立方体，并通过CSS样式控制其外观和位置：

  立即学习“前端免费学习笔记（深入）”；

  <!-- HTML结构 -->
  <div class="cube outer">
    <div class="face front"></div>
    <div class="face back"></div>
    <div class="face top"></div>
    <div class="face bottom"></div>
    <div class="face left"></div>
    <div class="face right"></div>
    <div class="cube inner">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
      <div class="face left"></div>
      <div class="face right"></div>
    </div>
  </div>

  登录后复制

  // CSS样式
  body{
    background: #2b3a42;
  }
  :root {
    --depth: 50px;
  }
  .cube {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    transform: translate(-50%,-50%) rotateX(-35deg) rotateY(-135deg) translateZ(var(--depth));
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .face {
    position: absolute;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
    z-index: -1;
  } 
  .front {
    transform: translateZ(var(--depth));
  }
  .back {
    transform: rotateY(180deg) translateZ(var(--depth));
  }
  .top {
    transform: rotateX(90deg) translateZ(var(--depth));
  }
  .bottom {
    transform: rotateX(-90deg) translateZ(var(--depth));
  }
  .left {
    transform: rotateY(-90deg) translateZ(var(--depth));
  }
  .right {
    transform: rotateY(90deg) translateZ(var(--depth));
  }
  .outer > .face{
    background: #75afcc;
    border: 1px solid white;
  }
  .outer > .back {
    background: none;
    border-width: 0.5px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    z-index: 100
  }
  .outer > .top {
    background: none;
    border-width: 0.5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    z-index: 100
  }
  .outer > .right {
    background: none;
    border-width: 0.5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    z-index: 100
  }
  .inner {
    width: 50px;
    height: 50px;
    transform: translate(-50%,-50%)
  }
  .inner > .face{
    --depth: 25px;
    width: 50px;
    height: 50px;
    background: #5299c8;
  }

  登录后复制

  通过设置background: none;以及调整border-width属性，可以轻松控制外层立方体的边框粗细，并实现内层立方体对部分外层立方体的遮盖效果。 这种方法更清晰、易于维护，也更符合CSS3的三维渲染机制。