css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Watch me code this in 27 minutes (you can also speed it up if you feel I'm typing/ speaking too slow). Doesn't work in Firefox/ Edge due to lack of support for calc() computing most values other than lengths. Update: now works in Firefox too, though it's laggy. Featured in my CSS-Tricks article Simplifying CSS Cubes with Custom Properties. If you like this demo in particular and my demos in general, please consider one of the following:

  • getting me something from my Amazon WishList
  • or this t-shirt (size S) that I couldn't find on Amazon, but I absolutely love
  • or at least support the implementation of the cool features showcased here - bugs 956573 and 984021 for Firefox, issue #653501 for Edge
  • oh, also, why not share this to show the rest of the world what CSS is now capable of?

Thank you!

Bees & Bombs original.

Sleepy Sky palette.

Title is a reference to Delain's Mother Machine.


  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.