cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen
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.

Comments

  1. @j-w-v Thank you! :)

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

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

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

  5. @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.

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

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

  8. @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.

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

You must be logged in to comment.
Loading...
Loading...