Using CSS transforms

Table of contents

  1. 1. Example: Rotating
  2. 2. Example: Skewing and translating
  3. 3. See also
Page Notifications Off

Introduced in Gecko 1.9.1

(Firefox 3.5 / Thunderbird 3.0 / SeaMonkey 2.0)

Firefox 3.5 (Gecko 1.9.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. Meanwhile it's a W3C working draft.

Mozilla currently supports the -moz-transform and -moz-transform-origin properties.

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="http://www.google.com/" width="500" height="600"></iframe>
</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;">
  <iframe src="http://www.google.com/" width="600" height="500"></iframe>
</div>

Tags (3)

Edit tags

Attachments (4)

Attach file