One feature that Firefox 3.5 adds to its CSS implementation is transform functions. These let you manipulate elements in two dimensional space by rotating, skewing, scaling, and translating them to alter their appearance.

I’ve put together a demo that shows how some of these functions work.

There are four animating objects in this demo. Let’s take a look at each of them.

Rotating the Firefox logo

On the left, we see the Firefox logo in a nice box, happily spinning in place. This is done by periodically setting the rotation value of the image object, whose ID is logoimg, like this:

  var logo = document.getElementById("logoimg");

  logoAngle = logoAngle + 2;
  if (logoAngle >= 360) {
    logoAngle = logoAngle - 360;
  }

  var style = "-moz-transform: rotate(" + logoAngle + "deg)";
  logo.setAttribute("style", style);

Every time the animation function is run, we rotate it by 2° around its origin by constructing a style string of the form -moz-transform: rotate(Ndeg).

By default, all elements’ origins are at their centers (that is, 50% along each axis). The origin can be changed using the -moz-transform-origin attribute.

Skewing text

We have two examples of skewing in this demo; the first skews horizontally, which causes the text to “lean” back and forth along the X axis. The second skews vertically, which causes the baseline to pivot along the Y axis.

In both cases, the code to accomplish this animation is essentially identical, so let’s just look at the code for skewing horizontally:

  text1SkewAngle = text1SkewAngle + text1SkewOffset;
  if (text1SkewAngle > 45) {
    text1SkewAngle = 45;
    text1SkewOffset = -2;
  } else if (text1SkewAngle < -45) {
    text1SkewAngle = -45;
    text1SkewOffset = 2;
  }

  text1.style.MozTransform = "skewx(" + text1SkewAngle + "deg)";

This code updates the current amount by which the text is skewed, starting at zero degrees and moving back and forth between -45° and 45° at a rate of 2° each time the animation function is called. Positive values skew the element to the right and negative values to the left.

Then the element's transform style is updated, setting the transform function to be of the form skewx(Ndeg), then setting the element's style.MozTransform property to that value.

Scaling elements

The last of the examples included in the demo shows how to scale an element using the scale transform function:

  text3Scale = text3Scale + text3ScaleOffset;
  if (text3Scale > 6) {
    text3Scale = 6;
    text3ScaleOffset = -0.1;
    text3.innerHTML = "It's going away so fast!"
    text3.style.color = "blue";
  } else if (text3Scale < 1) {
    text3Scale = 1;
    text3ScaleOffset = 0.1;
    text3.innerHTML = "It's coming right at us!";
    text3.style.color = "red";
  }

  text3.style.MozTransform = "scale(" + text3Scale + ")";

This code scales the element up and down between its original size (a scale factor of 1) and a scale factor of 6, moving by 0.1 units each frame. This is done by building a transform of the form scale(N), then setting the element's style.MozTransform property to that value.

In addition, just for fun, we're also changing the text and the color of the text in the block as we switch scaling directions, by setting the value of the block's innerHTML property to the new contents.

Final notes

Three more tidbits to take away from this:

First, note that as the scaling text grows wider, the document's width changes to fit it, getting wider as the text grows so that its right edge passes the edge of the document, then narrower as it shrinks again. You can see this by watching the scroll bar at the bottom of the Firefox browser window.

Second, note that you can actually select and copy the text not only while the elements are transformed, but the selection remains intact while the text continues to transform (although when we change the contents of the scaling example, the selection goes away).

Third, I didn't cover all the possible transforms here. For example, I skipped over the translate transform function, which lets you translate an object horizontally or vertically (basically, shifting its position by an offset). You can get a full list of the supported transforms on the Mozilla Developer Center web site.

Obviously this demo is somewhat frivolous (as demos are prone to be). However, there are genuinely useful things you can do with these when designing interfaces; for example, you can draw text rotated by 90° along the Y axis of a table in order to fit row labels in a narrow but tall space.