Pure CSS Shapes & solids #loop #shape

Wireframe globe in pure CSS

Nine circles rotated around the Y axis make the meridians; one laid flat is the equator.

  • 27 lines of CSS
  • 14 lines of HTML
  • No JavaScript
  • No dependencies
  • MIT licensed
Video 10.2 MB GitHub

How it works

  1. A circle is a square with border-radius: 50% and only a border.
  2. Nine of them, rotated i × 20deg around Y, form the meridians. 9 × 20° = 180° is enough because each ring is visible on both sides.
  3. One more ring laid flat with rotateX(90deg) is the equator.
  4. A static rotateZ before the animated rotateY gives the tilted-axis look.

Key techniques

  • border-radius: 50% rings
  • rotateY(i × 20deg)
  • preserve-3d spin

HTML 14 lines

<div class="scene">
  <div class="globe">
    <i style="--i:0"></i>
    <i style="--i:1"></i>
    <i style="--i:2"></i>
    <i style="--i:3"></i>
    <i style="--i:4"></i>
    <i style="--i:5"></i>
    <i style="--i:6"></i>
    <i style="--i:7"></i>
    <i style="--i:8"></i>
    <b></b>
  </div>
</div>

CSS 27 lines

.scene {
  perspective: 800px;
}

.globe {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: globe-spin 14s linear infinite;
}

.globe i,
.globe b {
  position: absolute;
  inset: 0;
  border: 1.5px solid #2ee6d6;
  border-radius: 50%;
}

.globe i { transform: rotateY(calc(var(--i) * 20deg)); }   /* meridians */
.globe b { transform: rotateX(90deg); border-color: #ff4d9d; } /* equator */

@keyframes globe-spin {
  from { transform: rotateZ(18deg) rotateX(-14deg) rotateY(0deg); }
  to   { transform: rotateZ(18deg) rotateX(-14deg) rotateY(360deg); }
}

Sass source 36 lines

.d-globe {
  position: relative;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: d-globe-spin 14s linear infinite;

  i,
  b {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--accent-2);
    border-radius: 50%;
  }

  // meridians: 9 × 20° covers the half turn (each ring shows on both sides). --i from markup.
  i {
    transform: rotateY(calc(var(--i) * 20deg));
  }

  // equator
  b {
    border-color: var(--hot);
    transform: rotateX(90deg);
  }
}

@keyframes d-globe-spin {
  from {
    transform: rotateZ(18deg) rotateX(-14deg) rotateY(0deg);
  }

  to {
    transform: rotateZ(18deg) rotateX(-14deg) rotateY(360deg);
  }
}
Standalone snippet · plain CSS, no build step, no dependencies.

More shapes & solids

Spinning coin Atom orbits