(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.
