Today’s Shiretoko (Firefox 3.1 codename) nightly introduces support for simple web elements transformations as CSS extensions originally proposed and implemented by the WebKit project.
The extensions include move, rotate, skew, scale and matrix operations for almost every web page element except plugins and popup menus among others. In the example below, Google’s main page and Wikipedia English home page have been embedded in transformed internal frames: moved, rotated and skewed. I also added some experimental transparency in the mix for a better effect.
You can try this code in today’s Firefox nightly:
<iframe style=”width:500px; height:500px; -moz-transform:translate(100px, 50px) rotate(30deg) skew(20deg);” src=”http://google.com”></iframe>
<iframe style=”width:500px; height:500px; -moz-transform:translate(50px, 80px) rotate(-50deg) skew(-20deg); -moz-opacity:.70;” src=”http://wikipedia.org”></iframe>
As said, these are still experimental features that haven’t been standardized yet (hence the -moz prefix), but as Keith Schwarz -the Mozilla intern largely responsible for the implementation- notes, now that there are already two implementations (Firefox and Safari) it should speed things up.