mozilla

Revision 53334 of Using CSS transforms

  • Revision slug: CSS/Using_CSS_transforms
  • Revision title: Using CSS transforms
  • Revision id: 53334
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment page created, 135 words added

Revision Content

{{ fx_minversion_header("3") }}

{{ draft() }}

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, perspective, and translation.  These properties are based upon a design proposed by the WebKit team.

Example: Rotating an iframe

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

View this example

<div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;">
  <iframe src="http://www.google.com/" width="500px" height="600px" />
</div>

See also

  • {{ Cssxref("-moz-transform") }}
  • {{ Cssxref("-moz-transform-origin") }}
  • {{ Cssxref("-moz-transform-style") }}
  • {{ Cssxref("-moz-perspective") }}
  • {{ Cssxref("-moz-perspective-origin") }}
  • {{ Cssxref("-moz-backface-visibility") }}
  • CSS transform functions

 

Revision Source

<p>{{ fx_minversion_header("3") }}</p>
<p>{{ draft() }}</p>
<p>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, perspective, and translation.  These properties are based upon a <a class="external" href="http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html" title="http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html">design proposed by the WebKit team</a>.</p>
<h2>Example: Rotating an iframe</h2>
<p>This example creates an iframe that lets you use Google's home page, rotated 90 degrees about its bottom-left corner.</p>
<p>View this example</p>
<pre class="brush: html">&lt;div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;"&gt;
  &lt;iframe src="http://www.google.com/" width="500px" height="600px" /&gt;
&lt;/div&gt;
</pre>
<h2>See also</h2>
<ul> <li>{{ Cssxref("-moz-transform") }}</li> <li>{{ Cssxref("-moz-transform-origin") }}</li> <li>{{ Cssxref("-moz-transform-style") }}</li> <li>{{ Cssxref("-moz-perspective") }}</li> <li>{{ Cssxref("-moz-perspective-origin") }}</li> <li>{{ Cssxref("-moz-backface-visibility") }}</li> <li><a class="internal" href="/En/CSS/CSS%20transform%20functions" title="En/CSS/CSS transform functions">CSS transform functions</a></li>
</ul>
<p> </p>
Revert to this revision