Collection of free HTML and CSS cube code examples

CSS Only Interactive Cube

CSS Only Cubes Hover Effects

CSS Only 3D Cube Image Slider

Only CSS: Noisy Cube

Pure CSS 3D Morph Cube ➜ Cubocta ➜ Octa

What's going on here: start with a cube, truncate to get a truncated cube, rectify to get a cuboctahedron, reverse rectify to get a truncated octahedron, reverse truncation to get an octahedron. The tiny edge gaps between the faces are intentional in order to see through to the darker faces in the back. The octahedron is the dual of the cube and the other way around.

What Got You so Jumpy?

Bubbly #5. Pure CSS 3D

CSS Cubes

CSS Cube of Cubes

CSS Magik Cube

Cubed Prism

CSS only cubed prism.

Cube - Radnerus

Single Div CSS Sinking Cube

Showbox 3D Video Rotating Cube

Showcasing a rotating 3D cube covered with videos for signup page of a fictional streaming movies service.

Big Cubes Animation with SVG <use> and CSS Variables

SVG cube reusing content with SVG, animation and CSS variables.

Pure CSS 3D Cube

CSS 3D Practice Goal

Cube

Tessaracted Cube

CSS-Only Cube Pack

Levitating Webpack 3 Logo

Webpack's 3 awesome logo animation.. with a bit of a shadow and a levitating effect added.

Spinning 3D Cube

Pure CSS spinning 3D cube.

Pure CSS 3D Cube Assembly Animation

Zero Element: Cube

Pure CSS Shaded Cube Wheels