3D Butterfly Animation — Pure CSS 3D Scene
A JavaScript-free 3D scene of seven butterflies circling inside a rotating cloud skybox, built entirely with HTML, CSS 3D transforms, keyframes and SVG.
Built by Redoan Uzzaman, Full-Stack Developer & AI Engineer.
Overview
A creative-coding piece showing how far pure CSS can go. Seven butterflies orbit through a 360° cloud skybox, each with its own size, flight path, speed and wing-flap timing, and none of it uses JavaScript.
How it works
The scene is built in layers: a sky background, a rotating skybox cube textured with clouds, and a container for each butterfly that handles orbital rotation. Nested elements add 3D positioning and tilt, a vertical "flutter" bob, and finally the SVG wings, which flap via their own keyframe animation. Varying durations and sizes (full, half and third scale) keep the motion from looking repetitive.
It works well as a landing-page background, a loading screen, or a demonstration of CSS perspective and 3D transforms.
Key Features
- Seven butterflies with unique flight paths and timings
- Rotating 360° cloud skybox
- CSS 3D perspective and transforms
- Keyframe wing-flap and flutter motion
- Zero JavaScript, fills the full viewport
Tech Stack
- HTML5
- CSS3
- SVG
- CSS 3D Transforms
- CSS Animations
Want something like this built?
Redoan Uzzaman takes on AI, automation and full-stack projects for clients worldwide.