Pandy, a 3D CSS demo

mrgan:

(This post uses formatting and features not visible in the Tumblr Dashboard. If anything below doesn’t make sense or looks plain ugly, consider viewing the post on my website. I love the Dashboard, I hate the Dashboard.)

Did you know you can do 3D transformations on objects in Webkit-based browsers? What I mean is, you can take an IMG or a DIV or, well, anything, and translate, rotate, or scale it in 3D space, along three axes.

I intended to make a standalone iPhone game that would demo this but other things got in the way, so I’m sharing what I have in hope that you can learn a bit about next-generation CSS and Javascript. Hit http://mrgan.com/pandy on your iPhone to try it out, then hit the same on your computer to have at the source code.

A few notes:

  • This will look fine on Safari on your desktop, but you can only interact with it on the iPhone, because I’m detecting touch events, not clicks.
  • Move your finger around to rotate the cube. (Many thanks to Andy Matuschak for help with the arcball!)
  • This whole thing was done quick and dirty, so don’t fault Webkit or the iPhone for bugs and performance; that’s all on me :)
  • This is in no way based on the awesome-sounding WebGL technology, which aims to make 3D way more powerful on the web.
  • Nothing to do with canvas either! Just some DIVs rotated in 3D space.

Source: mrgan

51 Notes/ Hide

  1. artgillespie reblogged this from mrgan and added:
    Slick. As. Hell.
  2. reconfine reblogged this from mrgan
  3. dalasverdugo reblogged this from mrgan
  4. kurafire reblogged this from mrgan and added:
    Sexy! Well done, sir.
  5. hsmt reblogged this from tanakahisateru
  6. tanakahisateru reblogged this from mrgan and added:
    これ、iPhoneのSafariだけで3Dの箱を回すデモを作ったってこと?
  7. richiety reblogged this from mrgan
  8. jacobd reblogged this from mrgan
  9. mrgan posted this