3D Navigational Compass Rose

Colours in this gradient

• #090d16
• #38bdf8
• #f43f5e
• #ffffff

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="comp-stage">
  <div class="comp-gyro">
    <div class="comp-ring outer-ring"></div>
    <div class="comp-ring inner-ring">
      <span class="cp-dir cp-n">N</span>
      <span class="cp-dir cp-e">E</span>
      <span class="cp-dir cp-s">S</span>
      <span class="cp-dir cp-w">W</span>
    </div>
    <div class="comp-needle">
      <div class="needle-north"></div>
      <div class="needle-south"></div>
      <div class="needle-pin"></div>
    </div>
  </div>
</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 navigational compass rose with dual-needle and rotating outer gimbal in pure HTML and CSS.

Requirements:
- 3D perspective stage with tilted compass gimbal (rotateX(45deg)).
- Outer dashed glowing ring and inner dial with N, S, E, W markers.
- Dual-color needle with red north and cyan south triangles.
- Needle search oscillation animation on Z-axis with translateZ(8px) elevation.
- Zero JavaScript.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Layer concentric rings with transform-style: preserve-3d.

2. 2

   Assemble triangular needles using CSS border geometry.

3. 3

   Animate gentle compass needle oscillation to simulate magnetic search.

Customisation tips

• Elevate the needle above the compass dial with translateZ(8px) for realistic depth.

More 3d scenes