Firefox 3.5 now supports HTML5, which includes some new features such as video element. Also, Firefox 3.5 supports new CSS Properties ( Mozilla extensions – some of this are available with webkit with slight differences)

Among other things was the -moz-transform and -moz-transform-originproperties which lets the developer apply a linear transformations to HTML elements.

I was playing around with the new video element and javascript. and with the -moz-transform, and thought of sharing

Here’s the code of the following rotated box

<div id='test' style='-moz-transform:rotate(-45deg) skew(10deg, 10deg); background-color:#0000aa; height:100px; width:100px;'>
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</div>

Here’s the code that will rotate the whole blog

<input type='button' value='Click Me!' onclick="document.getElementById('wrapper').style.MozTransform='rotate(-45deg) skew(10deg, 10deg)'" />