user profile image

Press mouse and then move for camera rotation. You can click keys.

I was obsessed with idea of recreation almost real 3D object with non-trivial shapes in Pure CSS. And i made this :D

Doesn't works in IE, because it's relies on transform-style: preserve-3d. Probably have tons of bugs. Pointless, but fun (c)

Based on this dribble - https://dribbble.com/shots/1971924-Bontempi


  1. That's really impressive! If you want to make it functional I've created a working synth you're welcome to use the code


  2. @Beciamide lol, this is cool, but I'm really bad with music. Feel free to create new pen from my and apply this functional. If you need, I can create+place additional keys (and these black too, but I don't even know what are they :D )

  3. Бог ты мой... Это восхитительно! Преклоняюсь...

  4. nice!! but I think the perspective is reversed .

  5. @BakerCo you talking about rotation?

  6. When you rotate the part closer to you should be larger and the part farther away should be smaller. I am just being picky this is really great!

  7. On closer review I do not actually see perspective are you rotating this isometrically?

  8. @BakerCo wow, it's a really awesome tip! Originally I rotated element with perspective, so this persective wasn't working for main element. Just fixed it (created global container with perspective and placed main element inside). Thanks :)

  9. Impresive man! ;)

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

You must be logged in to comment.