3D Looping Cubes Animation Using HTML and CSS

This animation creates a visually striking 3D stack of colorful cubes that appear to shrink and bounce in a continuous loop. Built entirely with HTML and CSS, the effect relies on 3D transformations, clever use of pseudo-elements, and smooth keyframe animations to simulate depth and motion without any JavaScript.

Visual Overview

The animation presents six cubes stacked vertically in a rotating 3D space. Each cube is a block with depth, and the entire stack is angled using perspective transforms to give a floating, tilted view. As the animation runs, each cube continuously scales down and up in an alternating rhythm, creating a mesmerizing loop that gives the illusion of pulsating 3D movement.

Structure of the Animation

The main container holds six identical cube items. Each cube is made from one main face and two additional sides — one on the top and one on the right — created using CSS pseudo-elements. This gives every item a realistic 3D box look.

Each cube has a unique color tone, creating a smooth vertical gradient from bright pinks and reds at the bottom to soft yellows at the top. These colors transition slightly between faces to enhance the cube’s 3D illusion and visual depth.

3D Transform and Rotation

The entire structure is rotated along the X and Y axes. This rotation tilts the stack diagonally in space, allowing viewers to see the front, top, and side of each cube. The stacking is controlled using position adjustments and transform origins, ensuring each cube is spaced evenly above the previous one.

The use of preserve-3d ensures that each face of the cube retains its orientation and depth when transformed, which is essential for maintaining the layered 3D appearance as the animation plays.

Scaling Animation Loop

Each cube is animated using a scale effect that shrinks and expands its size repeatedly. The animation uses smooth easing, which makes the motion feel more natural and fluid. What’s particularly clever is the use of delays for each cube — the animation for the top cube starts first, and each one below starts slightly later. This creates a beautiful staggered wave-like rhythm as the cubes pulse one after another.

Color and Light Effects

Every cube uses slightly different shades on its top and right faces, mimicking how light would hit the cube from different angles. This gradient of colors adds a touch of realism, enhancing the 3D illusion.

The shadow and background colors of the cubes are controlled using the currentColor property, which helps maintain consistency across the faces and makes color management more efficient.

Design Purpose and Use Cases

This type of 3D cube animation is ideal for background decoration, loading indicators, or creative hero sections on modern websites. It’s purely visual and doesn’t require any user interaction, making it great for creating an engaging atmosphere without distraction.

The animation is lightweight, visually impressive, and works purely with HTML and CSS, making it suitable even for performance-sensitive environments.

Conclusion

This 3D looping cube animation showcases the powerful capabilities of CSS when it comes to creating depth, motion, and layered visual effects. With no JavaScript involved, it delivers a stunning, dynamic presentation that can elevate any webpage’s design. The combination of 3D transforms, keyframes, and creative styling brings this stack of cubes to life in a clean and modern way.