Using CSS transforms

This article covers features introduced in Firefox 3.1

Firefox 3.1 introduced support for CSS transforms; these are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements. These transformations include rotation, skewing, scaling, and translation. These properties are based upon a design proposed by the WebKit team.

Mozilla currently supports the -moz-transform and -moz-transform-origin properties. For details on what transform functions are supported, see the article CSS transform functions.

Note: At this time, the Z axis is not supported, so perspective, 3D rotation, 3D scaling, and 3D transformations are not supported.

Example: Rotating

This example creates an iframe that lets you use Google's home page, rotated 90 degrees about its bottom-left corner.

View live example
View screenshot of example

<div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;">
  <iframe src=/old?u=http%3A%2F%2Fdeveloper.mozilla.org%2FEn%2FCSS%2F%26quot%3Bhttp%3A%2Fwww.google.com%2F%26quot&y=1999 width="500px" height="600px" />
</div>

Example: Skewing and translating

This example creates an iframe that lets you use Google's home page, skewed by 10 degrees on the X axis.

View live example
View screenshot of example

<div style="-moz-transform: skewx(10deg) translatex(150px);
            -moz-transform-origin: bottom left; -moz-perspective: 75;
            -moz-perspective-origin: 10% 75%;">
  <iframe src=/old?u=http%3A%2F%2Fdeveloper.mozilla.org%2FEn%2FCSS%2F%26quot%3Bhttp%3A%2Fwww.google.com%2F%26quot&y=1999 width="600px" height="500px" />
</div>

File			Size	Date	Attached by
		rotated-google-sample.html No description	252 bytes	21:03, 7 Oct 2008	Sheppy	Actions
		skewed-google-sample.html No description	325 bytes	21:20, 7 Oct 2008	Sheppy	Actions

Using CSS transforms

Table of contents

Example: Rotating

Example: Skewing and translating

See also

Files (2)