如何用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的三維渲染機制。