3D Bohr Atom Model — CSS Animation

Requirements:

• A central glowing nucleus positioned in the middle.

• Three elliptical or circular orbits arranged in 3D space using CSS transforms (rotateX, rotateY).

• Each orbit contains a small glowing electron that revolves smoothly around the nucleus.

• Use CSS keyframe animations to animate both:

  • the orbit rotation (for subtle motion of the orbit ring)

  • the electron movement (circular revolution using transform: rotate + translate).

• Apply different rotation angles and animation delays to each orbit for a dynamic, non-uniform effect.

• Use transform-style: preserve-3d to simulate depth.

• Add soft glow effects using box-shadow for both nucleus and electrons.

• Background should be dark to enhance contrast.

• Keep the code clean, well-structured, and reusable.

• Use modern CSS (no preprocessors like SCSS unless also compiled to plain CSS). Output:

• Provide complete HTML and CSS in one file.

• No external libraries.

• Animation should loop infinitely and run smoothly.

Add more electrons and orbits, also add zoom in zoom out animation to the orbits