3D Orbital Gyroscope

The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="gyro-stage">
  <div class="gyroscope">
    <div class="core-glow"></div>
    <div class="ring-wrap ring-x">
      <div class="ring"><span class="electron"></span></div>
    </div>
    <div class="ring-wrap ring-y">
      <div class="ring"><span class="electron"></span></div>
    </div>
    <div class="ring-wrap ring-z">
      <div class="ring"><span class="electron"></span></div>
    </div>
  </div>
  <p class="gyro-caption">Concentric 3D Gimbal &bull; Pure CSS 3D</p>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a 3D orbital gyroscope with concentric spinning rings and a glowing core using only HTML and CSS (no JavaScript).

Requirements:
- A stage with perspective: 1000px, dark space background.
- A gyroscope container with transform-style: preserve-3d that gently rocks on dual axes.
- A glowing spherical core at the center with radial-gradient and glowing box-shadows.
- Three concentric circular ring wrappers rotated on distinct 3D axes (rotate3d(1, 1, 0), rotate3d(0, 1, 1), and rotate3d(1, 0, 1)) spinning continuously at different speeds (8s, 11s, 14s).
- Each ring is coloured uniquely (orange, cyan, purple) with soft neon glow, and carries a glowing "electron" bead at its perimeter.
- All rings maintain real 3D depth with transform-style: preserve-3d.
- Respect prefers-reduced-motion by freezing the rings at distinct aesthetic angles.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Create a container with perspective and transform-style: preserve-3d.

2. 2

   Add a pulsating radial-gradient sphere at the exact center.

3. 3

   Build three separate ring layers and animate each on a composite 3D axis using rotate3d().

4. 4

   Attach a small glowing bead to each ring perimeter to highlight the orbital path.

5. 5

   Give each ring a different rotation period so their intersections never look repetitive.

Customisation tips

• Use rotate3d(x, y, z, angle) to spin in any arbitrary 3D plane without nesting multiple elements.
• Add box-shadow glows matching the border colour to create a neon holographic aesthetic.
• Excellent as an interactive AI / quantum computing hero illustration.

More 3d scenes