35+ CSS Cubes - Free Code + Demos
Collection of 35+ CSS Cubes. All items are 100% free and open-source.
1. Zero Element: Cube
Author: Keith Clark (keithclark)
Links: Source Code / Demo
Created on: September 30, 2016
Made with: SCSS
2. CSS-Only Cube Pack
Based on an animation by Joseph Ryba: https://www.instagram.com/p/BaFwMjpgu2a/?taken-by=joe_ryba Works best on Chrome.
Author: David Khourshid (davidkpiano)
Links: Source Code / Demo, Www.instagram.com
Created on: February 3, 2018
Made with: HTML, SCSS, JS
3. Levitating Webpack 3 Logo - CSS
Webpack's 3 awesome logo animation.. with a bit of a shadow and a levitating effect added.
Author: Emmanuel Lainas (RedGlove)
Links: Source Code / Demo
Created on: July 4, 2017
Made with: HTML, SCSS
Tags: webpack, css, animation, 3d-css
4. Spinning 3d Cube - Pure CSS
This is a pure CSS recreation of @beesandbombs gif https://twitter.com/beesandbombs/status/872082549610348544 of a spinning 3d cube with changing faces
Author: Ben Sheppard (flatking)
Links: Source Code / Demo, Twitter.com
Created on: June 6, 2017
Made with: Haml, Less, JS
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: css, animation, 3d-css, cube, rotation
5. Pure CSS 3D Cube Assembly Animation (Chrome)
Live coded in 30 min on the 13th of December 2016. Tested & works in Chrome. Firefox has 3D order issues. Edge has problems when using both 3D transforms & filters + 3D transform animation issues. Inspired by this Shutterstock video.
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: December 13, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: 3d, sass, transform, shutterstock, animation
6. Zero Element: Cube
Author: Keith Clark (keithclark)
Links: Source Code / Demo
Created on: September 30, 2016
Made with: SCSS
7. Pure CSS Shaded Cube Wheels (no Firefox)
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: September 5, 2016
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Haml
Tags: 3d, sass, transform, animation, shutterstock
8. New Cube Thingy
for show and tell
Author: Kyle Shanks (mavrK)
Links: Source Code / Demo
Created on: August 8, 2016
Made with: Slim, Stylus, JS
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Slim
9. Untitled
Author: yoksel (yoksel)
Links: Source Code / Demo
Created on: June 14, 2016
Made with: HTML, SCSS
10. Waving Cubes CSS
Author: David Verlangieri (verlangieri)
Links: Source Code / Demo
Created on: June 7, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
11. Cube Flipping Loader
CSS Simple Cube Flip Loading Animation
Author: Nikhil Krishnan (nikhil8krishnan)
Links: Source Code / Demo
Created on: May 17, 2016
Made with: HTML, SCSS
Tags: cube, flip, animation, loader, box animation
12. CSS Waving Cubes 2
Author: David Verlangieri (verlangieri)
Links: Source Code / Demo
Created on: May 16, 2016
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
13. CSS Fruit Cubes (no JS)
A simple quick fun demo inspired by this tweet & image.
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: May 17, 2015
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: transform, 3d, sass
14. 80s Retro Spinning Cube
Keeping on the 80s retro vibe
Author: Hugo Darby-Brown (hugo)
Links: Source Code / Demo
Created on: April 18, 2014
Made with: HTML, SCSS
15. 3D Cube Image Gallery
An image gallery in form of a 3D cube. The demo uses CSS3 3D and animation properties to create a nice animated cube. Image credits: Parag Gour (my brother)
Author: Kushagra Gour (chinchang)
Links: Source Code / Demo
Created on: July 7, 2013
Made with: HTML, SCSS
Tags: css3, animation, 3d, gallery
16. A Simple CSS 3D Cube
Made with https://desandro.github.io/3dtransforms/docs/cube.html
Author: Christian Malek (Phis)
Links: Source Code / Demo
Created on: October 9, 2015
Made with: HTML, CSS
17. PURE CSS 3D CUBE
Forked from Wifeo's Pen PURE CSS 3D CUBE.
Author: Bryan Braun (bryanbraun)
Links: Source Code / Demo
Created on: July 5, 2015
Made with: HTML, CSS, JS
Tags: animation, cube, keyframes, transform, css3
18. Abstract Cube
CSS 3D exploration and render test
Author: Mattia Astorino (equinusocio)
Links: Source Code / Demo
Created on: August 5, 2020
Made with: HTML, PostCSS
Tags: css, html, cube, pure, abstract
19. 3D Cube Social Media Pure Css3 Animation
3D Cube Loading Pure Css3 Animation
Author: Okba Design (Okba-Design)
Links: Source Code / Demo
Created on: July 27, 2020
Made with: HTML, CSS
Tags: 3d, cube, social, media, pure
20. PURE CSS 3D CUBE
Author: Wifeo (wifeo)
Links: Source Code / Demo
Created on: September 18, 2014
Made with: HTML, CSS, JS
Tags: animation, cube, keyframes, transform, css3
21. 3D CSS Cube With Vertical Rotate On Hover
http://cssdeck.com/labs/css3-flipping-cube
Author: digisam (digisam)
Links: Source Code / Demo
Created on: April 13, 2015
Made with: HTML, SCSS
22. 3D Nahal Cube
This is an animated 3D cube which has a logo called "Nahal"; Nahal is a brand for my brother;he builds whiteBoard and blackBoard
Author: Parsa (parsefi)
Links: Source Code / Demo
Created on: February 28, 2020
Made with: HTML, CSS
Tags: parsefi, parsa, cube, 3d-cube, animation
23. Spinning CSS
A recreation of this animation by reona396 with only CSS
Author: Ryan Mulligan (hexagoncircle)
Links: Source Code / Demo
Created on: February 19, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css-animation, cube, rotation, animation delay, css-variables
24. CSS Cube With Masked Image
Author: Drpz (Derps)
Links: Source Code / Demo
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
25. CodeSandbox.io Spinner
Author: Manan Tank (MananTank)
Links: Source Code / Demo
Created on: July 30, 2020
Made with: Pug, Stylus
CSS Pre-processor: Stylus
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animation, codesandbox, spinner, 3d, cube
26. CSS Cube
Author: Gemma Stiles (GemmaStiles)
Links: Source Code / Demo
Created on: August 25, 2020
Made with: HTML, SCSS
Tags: css, cube, 3dcube
27. CSS Pastel Rubik's Cube
A little experiment in working with 3D objects in CSS only. A Rubik's cube, but with a pastel twist :) CSS animation used to rotate the object so the cube shape is more visible I created this image working from the tutorial in Smashing Magazine: https://www.smashingmagazine.com/2016/07/f...Read More
Author: Suzanne Aitchison (aitchiss)
Links: Source Code / Demo
Created on: May 26, 2020
Made with: HTML, CSS
Tags: css, 3d, cube, animation, rubiks
28. Single Div CSS Sinking Cube
A CSS cube sinks, disappears, and then reappears.
Author: Lynn Fisher (lynnandtonic)
Links: Source Code / Demo
Created on: May 15, 2020
Made with: HTML, Stylus
Tags: illustration, css, cube, shapes, animation
29. Rotating Elements
Author: Zed Dash (z-)
Links: Source Code / Demo
Created on: September 11, 2019
Made with: HTML, SCSS
Tags: css, 3d, cube
30. 3D Cube Animation
A rotating 3D Cube '_'
Author: Novum Perspective Design (Launghe)
Links: Source Code / Demo
Created on: May 20, 2019
Made with: HTML, SCSS
Tags: 3d shapes, shapes, cube, css-3d, css-cube
31. Pure CSS Geometric Shapes Background Made By Linear-gradient
Author: RYO (Mryoo)
Links: Source Code / Demo
Created on: September 12, 2019
Made with: CSS
Tags: geometric, linear-gradient, gradation, cube
More Awesome Lists:
Share: