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

Edit: I wrote a post about how to make these! Check it out here.

They're a little trigger-happy, but when I fixed them to be less sensitive, I lost the interesting rotations you get at each corner. I decided they're better as-is.


  1. how do I change the image on the cube?

  2. @Emerald-Espeon There are inline SVGs in the Haml/HTML

  3. This is so cool! I love how they do multi-directional rotations when the mouse moves in/out diagonally. Nice work!

  4. @estewart23 Thanks! It was something I hadn't intended on, but I liked the effect so much I left it in. It's due to your mouse moving over a separate link area - the cube changes smoothly mid-transition to another transition.

  5. i love that you can tab through the cube sides. nice work

  6. This is great! Any way with only CSS to add direction-aware mouse-off as well? Fantastic work!

  7. @brandonmcconnell There is, in a way, but then the default state would be the same as the mouse-off state - you'd have to put the animation/transition on a ~ div and remove it on a:hover ~ div.

  8. WOW! So cool 🙌

  9. golly, you're awesome :)

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

You must be logged in to comment.