Firefox 3.5 just got released and with the upgrade has come some enhanced CSS support. The thing that’s capturing my attention first is the -moz-transform property that basically allows you to spin web page elements in two- and three-dimensional space (although 3D transformations are not supported yet; sorry, Z-axis). There is also a Webkit version (for Safari and Chrome) named: -webkit-transform. These are both proprietary versions of the W3C-recommended transform property, which is only for transforming elements in two-dimensional space.

Let’s look at an example. Here is the blog’s logo with a border added to its DIV and a little text thrown in so you can see better what’s happening when it gets transformed:

And here is the logo transformed:

And here is the code for the DIV:

1. #tr-logo
2. {
3. width: 205px;
4. margin: 2.2em;
5. padding: 4px;
6. border: solid #990000;
7. text-align: center;
8. -moz-transform: translate(10px, 4px) scale(.8, .6) rotate(30deg);
9. -moz-transform-origin: 60% 100%;
10. -webkit-transform: translate(10px, 4px) scale(.8, .6) rotate(30deg);
11. -webkit-transform-origin: 60% 100%;
12. }

In the -moz-transform property, the translate value “pushes” the element to a spot on the grid. In this case the element is pushed 10 pixels to the right on the X-axis (a negative value would push it to the left) and 4 pixels down on the Y-axis (a negative value would push it up, which I find to be a little counterintuitive). The scale value scales the width and the height of the element. Here I have the element scaled to 80% of its original width and 60% of its original height. It should be pretty obvious what the rotate value does. Here the element is getting rotated 30 degrees.

It goes without saying that if you’re not looking at this in a browser that supports this property you won’t see the effect. We’ll look into this property more later and see if we can even find a practical use for it.