Here’s a prototype I’ve been working on using the Greensock JS and CSS libraries (TweenMax and ThrowProps mainly).
In a browser that supports touch events (Chrome desktop or most tablets) you can spin it and pinch and zoom it.
Performance is pretty smooth but there’s always room for improvement using a sprite sheet. I appreciate the images and detail are by no means perfect – you can see joins and I haven’t added in headphone sockets, mute buttons or been very true to how the iPhone actually looks in detail so bear in mind that this is more of an experiment in creating 3D objects with rounded corners.
Firefox also has some Z depth issues which I haven’t quite worked around yet so it’s best viewed in Chrome or on an iPad (all the client work I’m doing currently is for an iPad, hence all my tests are optimised for it).
It would be totally possible to make the actual phone screen interactive like an actual iPhone – I just haven’t got around to it.
I originally created this in Edge Animate and decided to abstract my code into separate JS files and then minify/Uglify everything just so I could determine a final file size. Excluding (non-optimised) imagery and non-minified RequireJS and jQuery, it weighs in at 205Kb – not bad.
I’m interested to know what you think and what kind of frame rate you’re experiencing on your device – leave your thoughts in the comments.