mozilla

Revision 53337 of Using CSS transforms

  • Revision slug: CSS/Using_CSS_transforms
  • Revision title: Using CSS transforms
  • Revision id: 53337
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 100 words added, 2 words removed

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

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 this example 

<div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;">
  <iframe src="http://www.google.com/" 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 this example

<div style="-moz-transform: skewx(10deg) translatex(150px);
            -moz-transform-origin: bottom left; -moz-perspective: 75;
            -moz-perspective-origin: 10% 75%;">
  <iframe src="http://www.google.com/" width="600px" height="500px" />
</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, 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>
<div class="note"><strong>Note:</strong> At this time, the Z axis is not supported, so perspective, 3D rotation, 3D scaling, and 3D transformations are not supported.</div>
<h2>Example: Rotating</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><a class="internal" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">View this example</a> </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>Example: Skewing and translating</h2>
<p>This example creates an iframe that lets you use Google's home page, skewed by 10 degrees on the X axis.</p>
<p><a class="internal" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">View this example</a></p>
<pre class="brush: html">&lt;div style="-moz-transform: skewx(10deg) translatex(150px);
            -moz-transform-origin: bottom left; -moz-perspective: 75;
            -moz-perspective-origin: 10% 75%;"&gt;
  &lt;iframe src="http://www.google.com/" width="600px" height="500px" /&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_transform_functions" title="En/CSS/CSS transform functions">CSS transform functions</a></li>
</ul>
<p> </p>
Revert to this revision