3D Pyramid

<div class="nuda-pyramid-scene" aria-hidden="true">
  <div class="nuda-pyramid">
    <div class="nuda-pyramid__face nuda-pyramid__face--front"></div>
    <div class="nuda-pyramid__face nuda-pyramid__face--right"></div>
    <div class="nuda-pyramid__face nuda-pyramid__face--back"></div>
    <div class="nuda-pyramid__face nuda-pyramid__face--left"></div>
    <div class="nuda-pyramid__base"></div>
  </div>
</div>

/* 3D Pyramid
   Rotating wireframe pyramid using CSS 3D transforms.
   Customize: --pyr-color, --pyr-size, --pyr-speed */

.nuda-pyramid-scene {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 400px;
  padding: 2rem;
}

.nuda-pyramid {
  --pyr-color: #e4ff54;
  --pyr-size: 80px;
  --pyr-speed: 8s;
  width: var(--pyr-size);
  height: var(--pyr-size);
  position: relative;
  transform-style: preserve-3d;
  animation: nuda-pyr-spin var(--pyr-speed) linear infinite;
  transform-origin: center 60%;
}

.nuda-pyramid__face {
  position: absolute;
  width: 0;
  height: 0;
  border-left: calc(var(--pyr-size) / 2) solid transparent;
  border-right: calc(var(--pyr-size) / 2) solid transparent;
  border-bottom: calc(var(--pyr-size) * 0.87) solid rgba(228, 255, 84, 0.06);
  transform-origin: bottom center;
}

.nuda-pyramid__face--front { left: 0; bottom: 0; transform: rotateX(30deg) translateZ(calc(var(--pyr-size) * 0.29)); }
.nuda-pyramid__face--right { left: 0; bottom: 0; transform: rotateY(90deg) rotateX(30deg) translateZ(calc(var(--pyr-size) * 0.29)); }
.nuda-pyramid__face--back  { left: 0; bottom: 0; transform: rotateY(180deg) rotateX(30deg) translateZ(calc(var(--pyr-size) * 0.29)); }
.nuda-pyramid__face--left  { left: 0; bottom: 0; transform: rotateY(-90deg) rotateX(30deg) translateZ(calc(var(--pyr-size) * 0.29)); }

.nuda-pyramid__base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--pyr-size);
  height: var(--pyr-size);
  background: rgba(228, 255, 84, 0.04);
  border: 1px solid rgba(228, 255, 84, 0.1);
  transform: rotateX(90deg);
}

@keyframes nuda-pyr-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-pyramid {
    animation: none;
    transform: rotateX(-10deg) rotateY(30deg);
  }
}