New css3 3d demo inspired by portal.

Written by Alex Wolkov

Portal 2. have you played it? if yo haven’t go and buy it from steam then come back here.

If you have, then you might have noticed the awesome effect from the main menu, the rotating cubes.

I was so impressed by it that I had to try and replicate it. (click on image to see the demo)

Couple of things I learned :

  • You can bind a handler to “webkitTransitionEnd” and execute code when the transition on that element finishes.
  • It’s very hard to “reset” transitioned elements  back to their original state, if you don’t want that reset to be animated. You have to manually override -webkit-transition-porperty , reset the stage (for example rotate(0) ) and then set the transition property back to what it was.
  • Facebook caches the shared pages, so if you put a facebook “like” button, and then change the page’s title, of meta, you have to  “reset” the link. the best/only way to do that without changing the url is facebook url lint.
  • Css3 3d is fun! go experiment with it, it’s gpu accelerated where ever it’s avaliable be it mobile or ipad or mac, and it’s looking super smooth! go crazy
  • Yamato828

    This is really cool, how do you do this? Is there a tutorial for this and for that awesome puzzle video you posted a year ago? http://alexw.me/2010/05/html5-video-puzzle-proof-of-concept/

  • Anonymous

    hmm I’m not too good with tutorials, bur everything is in the source, you can checkout the css of it

  • yamato828

    wheres the source code link?