If you are visiting this page with either Safari or Chrome, then you just saw some pretty cool 3D-effects happening with the Drupal logo lifting itself off the page and flying across your screen, don't you think?
And you may wonder: how many lines of jQuery, Flash and what have you went into that !?!
The answer: zero.
Yep, that's right. 5 HTML tags plus a stylesheet of a meagre 40 lines is all it took to bring this movie to your screen.
Want to try it out on your site? Copy the code below into just about any page on your Drupal 7 site and you should enjoy the same show, pretty much regardless of the theme you happen to be using. Just click the Edit tab on a page or article on your site, disable the rich text editor and paste the following lines at the top. Make sure to set the Text format to "Full HTML" or "PHP code" before you press Save.
<link rel="stylesheet" type="text/css" href="http://flink.com.au/sites/default/files/fly.css"> <div id="rotate-home"> <div id="rotateXY"> <div id="rotateZ"> <img src="/themes/seven/logo.png"> </div> </div> </div>
Works inside blocks too!
Where's all the CSS magic? Here.
The CSS was inspired by this great The Art of the Web article. This article will also tell you that while Firefox (v9) supports most animation functions, it only features in-plane (i.e. z-axis) rotations, not x- and y-axes rotations. So you can't create the 3D effects on this page.
Mircrosoft may catch up with Safari and Chrome in IE version 10.