Sfera 3D

Bagai obor-obor berenang di air. Obor-obor alien.

Demo

CSSnya panjang berjela!

HTML view ▼

<div style="height: 620px; overflow: hidden; background: #222222; position: relative;">
<div class="labu-labi">
  <div class="lak-labi">
    <div class="plane plane-1">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-2">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-3">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-4">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-5">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-6">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-7">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-8">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-9">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-10">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-11">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
    <div class="plane plane-12">
      <div class="spoke spoke-1"><div class="dot"></div></div>
      <div class="spoke spoke-2"><div class="dot"></div></div>
      <div class="spoke spoke-3"><div class="dot"></div></div>
      <div class="spoke spoke-4"><div class="dot"></div></div>
      <div class="spoke spoke-5"><div class="dot"></div></div>
      <div class="spoke spoke-6"><div class="dot"></div></div>
      <div class="spoke spoke-7"><div class="dot"></div></div>
      <div class="spoke spoke-8"><div class="dot"></div></div>
      <div class="spoke spoke-9"><div class="dot"></div></div>
      <div class="spoke spoke-10"><div class="dot"></div></div>
      <div class="spoke spoke-11"><div class="dot"></div></div>
      <div class="spoke spoke-12"><div class="dot"></div></div>
      <div class="spoke spoke-13"><div class="dot"></div></div>
      <div class="spoke spoke-14"><div class="dot"></div></div>
      <div class="spoke spoke-15"><div class="dot"></div></div>
      <div class="spoke spoke-16"><div class="dot"></div></div>
      <div class="spoke spoke-17"><div class="dot"></div></div>
      <div class="spoke spoke-18"><div class="dot"></div></div>
      <div class="spoke spoke-19"><div class="dot"></div></div>
      <div class="spoke spoke-20"><div class="dot"></div></div>
      <div class="spoke spoke-21"><div class="dot"></div></div>
      <div class="spoke spoke-22"><div class="dot"></div></div>
      <div class="spoke spoke-23"><div class="dot"></div></div>
      <div class="spoke spoke-24"><div class="dot"></div></div>
      <div class="spoke spoke-25"><div class="dot"></div></div>
      <div class="spoke spoke-26"><div class="dot"></div></div>
      <div class="spoke spoke-27"><div class="dot"></div></div>
      <div class="spoke spoke-28"><div class="dot"></div></div>
      <div class="spoke spoke-29"><div class="dot"></div></div>
      <div class="spoke spoke-30"><div class="dot"></div></div>
      <div class="spoke spoke-31"><div class="dot"></div></div>
      <div class="spoke spoke-32"><div class="dot"></div></div>
      <div class="spoke spoke-33"><div class="dot"></div></div>
      <div class="spoke spoke-34"><div class="dot"></div></div>
      <div class="spoke spoke-35"><div class="dot"></div></div>
      <div class="spoke spoke-36"><div class="dot"></div></div>
    </div>
  </div>
</div>
</div>
<style>
.labu-labi {
  display: flex;
  position: absolute;
  transform-style: preserve-3d;
  perspective: 300px;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  align-items: center;
  justify-content: center;
}
.lak-labi {
  transform-style: preserve-3d;
  width: 400px;
  height: 400px;
  position: relative;
  -webkit-animation: rotate3d 10s linear infinite;
          animation: rotate3d 10s linear infinite;
}
.plane {
  position: absolute;
  transform-style: preserve-3d;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.spoke {
  transform-origin: 0 0;
  transform-style: preserve-3d;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 150px;
  width: 0px;
}
.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  left: -3px;
  top: 100%;
  transform: rotateX(90deg);
}
.spoke.spoke-1 {
  transform: rotateZ(10deg);
}
.spoke.spoke-2 {
  transform: rotateZ(20deg);
}
.spoke.spoke-3 {
  transform: rotateZ(30deg);
}
.spoke.spoke-4 {
  transform: rotateZ(40deg);
}
.spoke.spoke-5 {
  transform: rotateZ(50deg);
}
.spoke.spoke-6 {
  transform: rotateZ(60deg);
}
.spoke.spoke-7 {
  transform: rotateZ(70deg);
}
.spoke.spoke-8 {
  transform: rotateZ(80deg);
}
.spoke.spoke-9 {
  transform: rotateZ(90deg);
}
.spoke.spoke-10 {
  transform: rotateZ(100deg);
}
.spoke.spoke-11 {
  transform: rotateZ(110deg);
}
.spoke.spoke-12 {
  transform: rotateZ(120deg);
}
.spoke.spoke-13 {
  transform: rotateZ(130deg);
}
.spoke.spoke-14 {
  transform: rotateZ(140deg);
}
.spoke.spoke-15 {
  transform: rotateZ(150deg);
}
.spoke.spoke-16 {
  transform: rotateZ(160deg);
}
.spoke.spoke-17 {
  transform: rotateZ(170deg);
}
.spoke.spoke-18 {
  transform: rotateZ(180deg);
}
.spoke.spoke-19 {
  transform: rotateZ(190deg);
}
.spoke.spoke-20 {
  transform: rotateZ(200deg);
}
.spoke.spoke-21 {
  transform: rotateZ(210deg);
}
.spoke.spoke-22 {
  transform: rotateZ(220deg);
}
.spoke.spoke-23 {
  transform: rotateZ(230deg);
}
.spoke.spoke-24 {
  transform: rotateZ(240deg);
}
.spoke.spoke-25 {
  transform: rotateZ(250deg);
}
.spoke.spoke-26 {
  transform: rotateZ(260deg);
}
.spoke.spoke-27 {
  transform: rotateZ(270deg);
}
.spoke.spoke-28 {
  transform: rotateZ(280deg);
}
.spoke.spoke-29 {
  transform: rotateZ(290deg);
}
.spoke.spoke-30 {
  transform: rotateZ(300deg);
}
.spoke.spoke-31 {
  transform: rotateZ(310deg);
}
.spoke.spoke-32 {
  transform: rotateZ(320deg);
}
.spoke.spoke-33 {
  transform: rotateZ(330deg);
}
.spoke.spoke-34 {
  transform: rotateZ(340deg);
}
.spoke.spoke-35 {
  transform: rotateZ(350deg);
}
.plane.plane-1 {
  transform: rotateY(15deg);
}
.plane.plane-2 {
  transform: rotateY(30deg);
}
.plane.plane-3 {
  transform: rotateY(45deg);
}
.plane.plane-4 {
  transform: rotateY(60deg);
}
.plane.plane-5 {
  transform: rotateY(75deg);
}
.plane.plane-6 {
  transform: rotateY(90deg);
}
.plane.plane-7 {
  transform: rotateY(105deg);
}
.plane.plane-8 {
  transform: rotateY(120deg);
}
.plane.plane-9 {
  transform: rotateY(135deg);
}
.plane.plane-10 {
  transform: rotateY(150deg);
}
.plane.plane-11 {
  transform: rotateY(165deg);
}
.spoke-0 .dot,
.spoke-36 .dot {
  -webkit-animation: pulsate 0.5s infinite 0s alternate both;
          animation: pulsate 0.5s infinite 0s alternate both;
  background-color: #ff9955;
}
.spoke-1 .dot,
.spoke-35 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.05555556s alternate both;
          animation: pulsate 0.5s infinite 0.05555556s alternate both;
  background-color: #ffb555;
}
.spoke-2 .dot,
.spoke-34 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.11111111s alternate both;
          animation: pulsate 0.5s infinite 0.11111111s alternate both;
  background-color: #ffd255;
}
.spoke-3 .dot,
.spoke-33 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.16666667s alternate both;
          animation: pulsate 0.5s infinite 0.16666667s alternate both;
  background-color: #ffee55;
}
.spoke-4 .dot,
.spoke-32 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.22222222s alternate both;
          animation: pulsate 0.5s infinite 0.22222222s alternate both;
  background-color: #f4ff55;
}
.spoke-5 .dot,
.spoke-31 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.27777778s alternate both;
          animation: pulsate 0.5s infinite 0.27777778s alternate both;
  background-color: #d7ff55;
}
.spoke-6 .dot,
.spoke-30 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.33333333s alternate both;
          animation: pulsate 0.5s infinite 0.33333333s alternate both;
  background-color: #bbff55;
}
.spoke-7 .dot,
.spoke-29 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.38888889s alternate both;
          animation: pulsate 0.5s infinite 0.38888889s alternate both;
  background-color: #9fff55;
}
.spoke-8 .dot,
.spoke-28 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.44444444s alternate both;
          animation: pulsate 0.5s infinite 0.44444444s alternate both;
  background-color: #82ff55;
}
.spoke-9 .dot,
.spoke-27 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.5s alternate both;
          animation: pulsate 0.5s infinite 0.5s alternate both;
  background-color: #66ff55;
}
.spoke-10 .dot,
.spoke-26 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.55555556s alternate both;
          animation: pulsate 0.5s infinite 0.55555556s alternate both;
  background-color: #55ff60;
}
.spoke-11 .dot,
.spoke-25 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.61111111s alternate both;
          animation: pulsate 0.5s infinite 0.61111111s alternate both;
  background-color: #55ff7d;
}
.spoke-12 .dot,
.spoke-24 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.66666667s alternate both;
          animation: pulsate 0.5s infinite 0.66666667s alternate both;
  background-color: #55ff99;
}
.spoke-13 .dot,
.spoke-23 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.72222222s alternate both;
          animation: pulsate 0.5s infinite 0.72222222s alternate both;
  background-color: #55ffb5;
}
.spoke-14 .dot,
.spoke-22 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.77777778s alternate both;
          animation: pulsate 0.5s infinite 0.77777778s alternate both;
  background-color: #55ffd2;
}
.spoke-15 .dot,
.spoke-21 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.83333333s alternate both;
          animation: pulsate 0.5s infinite 0.83333333s alternate both;
  background-color: #55ffee;
}
.spoke-16 .dot,
.spoke-20 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.88888889s alternate both;
          animation: pulsate 0.5s infinite 0.88888889s alternate both;
  background-color: #55f4ff;
}
.spoke-17 .dot,
.spoke-19 .dot {
  -webkit-animation: pulsate 0.5s infinite 0.94444444s alternate both;
          animation: pulsate 0.5s infinite 0.94444444s alternate both;
  background-color: #55d7ff;
}
.spoke-18 .dot,
.spoke-18 .dot {
  -webkit-animation: pulsate 0.5s infinite 1s alternate both;
          animation: pulsate 0.5s infinite 1s alternate both;
  background-color: #55bbff;
}
@-webkit-keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
@keyframes rotate3d {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 1, 1, 90deg);
  }
  50% {
    transform: rotate3d(1, 1, 1, 180deg);
  }
  75% {
    transform: rotate3d(1, 1, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}
@-webkit-keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}
@keyframes pulsate {
  0% {
    transform: rotateX(90deg) scale(0.3) translateZ(20px);
  }
  100% {
    transform: rotateX(90deg) scale(1) translateZ(0px);
  }
}
</style>

Tutup

CSS disesuaikan untuk paparan di blog ini, dipetik dari codepen