How to build a Webpack Logo rotating cube with shading and thick border effects in CSS3?

Build a rotating Webpack Logo cube with masking and thick border effects using CSS3

This article details how to use CSS3 to build a cool Webpack Logo rotating cube that contains two layers inside and outside, with masking and thick border effects. We will improve the initial code structure to achieve the expected results more effectively.

The initial scheme tried to create cubes using ::before and ::after pseudo-elements, but there were shortcomings in terms of rotation and masking effects. This is because pseudo-elements are not ideal for building three-dimensional cubes. A better solution is to use<div> Elements represent six faces of the cube, and use CSS3's <code>transform-style: preserve-3d; attributes, as well as properties such as rotateX , rotateY , translateZ to achieve three-dimensional rotation and positioning. The inner cube achieves the masking effect of the outer cube by adjusting the size and position. The thick border is achieved by setting the border-width attribute of each face.

The improved HTML structure is as follows:

<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>

Corresponding CSS style:

 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, .outer > .top, .outer > .right {
  background: none;
  border-width: 0.5px;
  border-right-width: 5px;
  border-bottom-width: 5px;
  border-left-width: 5px; /*Unified adjustment of thick border*/
  z-index: 100;
}

.inner {
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
}

.inner > .face {
  --depth: 25px;
  width: 50px;
  height: 50px;
  background: #5299c8;
}

Mask and thick border effects can be easily achieved by setting the background of partial surfaces of the outer cube to none and adjusting border-width attribute. The size and position of the inner cube can be adjusted as needed. This method effectively builds the Webpack Logo effect that meets the expectations.