3d Solar System Model in HTML and CSS

<div class="stars" id="stars"></div>

<div class="info-panel">
  <h1>☀️ Solar System</h1>
  <p>A 3D model of our solar system with realistic orbital mechanics. Watch as the planets revolve around the Sun at different speeds.</p>
</div>

<div class="controls">
  🪐 Pure HTML & CSS Animation - No JavaScript
</div>

<div class="solar-system">
  <div class="container">
    <div class="sun">
      <div class="planet-label">Sun</div>
    </div>

    <div class="orbit mercury-orbit">
      <div class="planet mercury">
        <div class="planet-label">Mercury</div>
      </div>
    </div>

    <div class="orbit venus-orbit">
      <div class="planet venus">
        <div class="planet-label">Venus</div>
      </div>
    </div>

    <div class="orbit earth-orbit">
      <div class="planet earth">
        <div class="planet-label">Earth</div>
      </div>
    </div>

    <div class="orbit mars-orbit">
      <div class="planet mars">
        <div class="planet-label">Mars</div>
      </div>
    </div>

    <div class="orbit jupiter-orbit">
      <div class="planet jupiter">
        <div class="planet-label">Jupiter</div>
      </div>
    </div>

    <div class="orbit saturn-orbit">
      <div class="planet saturn">
        <div class="planet-label">Saturn</div>
      </div>
    </div>

    <div class="orbit uranus-orbit">
      <div class="planet uranus">
        <div class="planet-label">Uranus</div>
      </div>
    </div>

    <div class="orbit neptune-orbit">
      <div class="planet neptune">
        <div class="planet-label">Neptune</div>
      </div>
    </div>
  </div>
</div>

     * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
            min-height: 100vh;
            overflow: hidden;
            position: relative;
        }

        /* Stars background */
        .stars {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }

        .info-panel {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 20px;
            border-radius: 15px;
            color: white;
            max-width: 300px;
            z-index: 1000;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .info-panel h1 {
            font-size: 24px;
            margin-bottom: 10px;
            background: linear-gradient(45deg, #ffd700, #ff8c00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .info-panel p {
            font-size: 13px;
            line-height: 1.6;
            opacity: 0.9;
        }

        .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            padding: 15px 25px;
            border-radius: 50px;
            color: white;
            font-size: 14px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 1000;
        }

        .solar-system {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            perspective: 1200px;
        }

        .container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-style: preserve-3d;
            animation: rotate 240s linear infinite;
        }

        @keyframes rotate {
            0% { transform: rotateY(0deg) rotateX(-10deg); }
            100% { transform: rotateY(360deg) rotateX(-10deg); }
        }

        /* Sun */
        .sun {
            position: absolute;
            width: 80px;
            height: 80px;
            background: radial-gradient(circle, #ffd700 0%, #ff8c00 100%);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            margin: -40px 0 0 -40px;
            box-shadow: 
                0 0 60px #ffd700,
                0 0 100px #ff8c00,
                0 0 140px #ff4500;
            animation: pulse 4s infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        /* Orbit */
        .orbit {
            position: absolute;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform-style: preserve-3d;
        }

        /* Planet */
        .planet {
            position: absolute;
            border-radius: 50%;
            top: 50%;
            transform-style: preserve-3d;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        /* Mercury */
        .mercury-orbit {
            width: 140px;
            height: 140px;
            margin: -70px 0 0 -70px;
            animation: orbit 8s linear infinite;
        }

        .mercury {
            width: 12px;
            height: 12px;
            background: radial-gradient(circle at 30% 30%, #a8a8a8, #4a4a4a);
            margin: -6px 0 0 -6px;
            left: 140px;
        }

        /* Venus */
        .venus-orbit {
            width: 200px;
            height: 200px;
            margin: -100px 0 0 -100px;
            animation: orbit 12s linear infinite;
        }

        .venus {
            width: 18px;
            height: 18px;
            background: radial-gradient(circle at 30% 30%, #ffd89b, #cc7722);
            margin: -9px 0 0 -9px;
            left: 200px;
        }

        /* Earth */
        .earth-orbit {
            width: 260px;
            height: 260px;
            margin: -130px 0 0 -130px;
            animation: orbit 16s linear infinite;
        }

        .earth {
            width: 20px;
            height: 20px;
            background: radial-gradient(circle at 30% 30%, #4facfe, #0066cc);
            margin: -10px 0 0 -10px;
            left: 260px;
            position: relative;
        }

        .earth::after {
            content: '';
            position: absolute;
            width: 6px;
            height: 6px;
            background: #999;
            border-radius: 50%;
            top: -15px;
            left: 50%;
            margin-left: -3px;
            animation: moon 2s linear infinite;
        }

        @keyframes moon {
            0% { transform: rotate(0deg) translateX(15px); }
            100% { transform: rotate(360deg) translateX(15px); }
        }

        /* Mars */
        .mars-orbit {
            width: 330px;
            height: 330px;
            margin: -165px 0 0 -165px;
            animation: orbit 20s linear infinite;
        }

        .mars {
            width: 16px;
            height: 16px;
            background: radial-gradient(circle at 30% 30%, #ff6b6b, #c92a2a);
            margin: -8px 0 0 -8px;
            left: 330px;
        }

        /* Jupiter */
        .jupiter-orbit {
            width: 420px;
            height: 420px;
            margin: -210px 0 0 -210px;
            animation: orbit 28s linear infinite;
        }

        .jupiter {
            width: 40px;
            height: 40px;
            background: radial-gradient(circle at 30% 30%, #f4a261, #d08c60);
            margin: -20px 0 0 -20px;
            left: 420px;
            position: relative;
        }

        .jupiter::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background: rgba(139, 69, 19, 0.5);
            top: 50%;
            left: 0;
        }

        /* Saturn */
        .saturn-orbit {
            width: 520px;
            height: 520px;
            margin: -260px 0 0 -260px;
            animation: orbit 36s linear infinite;
        }

        .saturn {
            width: 35px;
            height: 35px;
            background: radial-gradient(circle at 30% 30%, #f4e1c1, #d4a373);
            margin: -17.5px 0 0 -17.5px;
            left: 520px;
            position: relative;
        }

        .saturn::before {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            border: 3px solid rgba(244, 225, 193, 0.4);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotateX(75deg);
        }

        /* Uranus */
        .uranus-orbit {
            width: 610px;
            height: 610px;
            margin: -305px 0 0 -305px;
            animation: orbit 44s linear infinite;
        }

        .uranus {
            width: 24px;
            height: 24px;
            background: radial-gradient(circle at 30% 30%, #4dd0e1, #00838f);
            margin: -12px 0 0 -12px;
            left: 610px;
        }

        /* Neptune */
        .neptune-orbit {
            width: 700px;
            height: 700px;
            margin: -350px 0 0 -350px;
            animation: orbit 52s linear infinite;
        }

        .neptune {
            width: 22px;
            height: 22px;
            background: radial-gradient(circle at 30% 30%, #3949ab, #1a237e);
            margin: -11px 0 0 -11px;
            left: 700px;
        }

        @keyframes orbit {
            0% { transform: rotateZ(0deg); }
            100% { transform: rotateZ(360deg); }
        }

        /* Planet labels */
        .planet-label {
            position: absolute;
            color: white;
            font-size: 10px;
            white-space: nowrap;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0.7;
            pointer-events: none;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
        }

        @media (max-width: 768px) {
            .info-panel {
                max-width: 200px;
                padding: 15px;
                font-size: 11px;
            }

            .info-panel h1 {
                font-size: 18px;
            }

            .controls {
                font-size: 12px;
                padding: 10px 20px;
            }

            .sun {
                width: 50px;
                height: 50px;
                margin: -25px 0 0 -25px;
            }

            .mercury-orbit { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
            .mercury { left: 90px; width: 8px; height: 8px; margin: -4px 0 0 -4px; }

            .venus-orbit { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
            .venus { left: 130px; width: 12px; height: 12px; margin: -6px 0 0 -6px; }

            .earth-orbit { width: 170px; height: 170px; margin: -85px 0 0 -85px; }
            .earth { left: 170px; width: 14px; height: 14px; margin: -7px 0 0 -7px; }

            .mars-orbit { width: 210px; height: 210px; margin: -105px 0 0 -105px; }
            .mars { left: 210px; width: 10px; height: 10px; margin: -5px 0 0 -5px; }

            .jupiter-orbit { width: 260px; height: 260px; margin: -130px 0 0 -130px; }
            .jupiter { left: 260px; width: 25px; height: 25px; margin: -12.5px 0 0 -12.5px; }

            .saturn-orbit { width: 320px; height: 320px; margin: -160px 0 0 -160px; }
            .saturn { left: 320px; width: 22px; height: 22px; margin: -11px 0 0 -11px; }

            .uranus-orbit { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
            .uranus { left: 380px; width: 16px; height: 16px; margin: -8px 0 0 -8px; }

            .neptune-orbit { width: 440px; height: 440px; margin: -220px 0 0 -220px; }
            .neptune { left: 440px; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
        }

      // Generate stars
        const starsContainer = document.getElementById('stars');
        for (let i = 0; i < 200; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            star.style.left = Math.random() * 100 + '%';
            star.style.top = Math.random() * 100 + '%';
            star.style.animationDelay = Math.random() * 3 + 's';
            starsContainer.appendChild(star);
        }