The CSS Transform properties were originally proposed by the WebKit team, but have in the meantime found entry into Firefox and there is now also partial support in Opera. The basic idea of the transform property is to allow moving, scaling, rotating and skewing of objects on a web page.
Together with the transform animation properties in WebKit these CSS properties create the basic support for HTML-based apps on the iPhone and iPad and we will therefore hear a lot about these in the near future.
Here is some more information about Transforms:
Here we have a simple stack of three divs and we are using transforms to move the second ("In") and third ("Flight") div up to overlay the first div ("Stories").
Please note that while the content of the divs has been visually transformed, the original div placement is still in effect for the original page layout, so the following div (containing this sentence) is placed under the area where the content of examplediv3 would have been. This same effect can also be observed with transform scaled objects, so while the content of a div may be visually smaller, the original object still requires space in the page.
Also note: Opera seems currently (April 2010) not to be able to render negatve values for the transform translation, so the text elements do not overlap in that browser.
Here we take the same layout we've created in the first example and added a container div with overflow:hidden and few other CSS flourishes.
There seems to be still a small difference between the WebKit and Firefox implementatons, since in Mozilla the text sits a few pixels higher in the container, but the difference is not big enough to be a problem for this specific example.
This is essentially the code being used for the logo at the top of these pages, the only difference being the overall size.