transform

  • Revision slug: CSS/transform
  • Revision title: transform
  • Revision id: 21676
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 14 words added, 3 words removed

Revision Content

{{ CSSRef() }}

Summary

The -moz-transform property lets you modify the coordinate space of the CSS visual formatting model.  Using it, elements can be translated, rotated, and scaled in two or three dimensions.

  • {{ Xref_cssinitial() }}: none
  • Applies to: all block level and inline level elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}:

Syntax

 -moz-transform: <transform-function> [<transform-function>]* | none

Values

  • transform-function : one or more of the CSS transform functions to be applied
  • none : specifies that no transform should be applied

Examples

{{ CSSRefExampleLink("transform") }}

<div style="transform: rotate(45deg)">
  ...
</div>

 

Notes

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer ?
Firefox 3.1
Opera

?

Safari ?

 

Revision Source

<p>{{ CSSRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>The <code>-moz-transform</code> property lets you modify the coordinate space of the CSS visual formatting model.  Using it, elements can be translated, rotated, and scaled in two or three dimensions.</p>
<ul> <li>{{ Xref_cssinitial() }}: none</li> <li>Applies to: all block level and inline level elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}:</li>
</ul>
<h3 name="Syntax">Syntax</h3>
<pre class="eval"> -moz-transform: &lt;transform-function&gt; [&lt;transform-function&gt;]* | none
</pre>
<h3 name="Values">Values</h3>
<ul> <li><strong>transform-function</strong> : one or more of the <a class="internal" href="/CSS%20transform%20functions" title="CSS transform functions">CSS transform functions</a> to be applied</li> <li>none : specifies that no transform should be applied</li>
</ul>
<h3 name="Examples">Examples</h3>
<p>{{ CSSRefExampleLink("transform") }}</p>
<pre>&lt;div style="transform: rotate(45deg)"&gt;
  ...
&lt;/div&gt;
</pre>
<p> </p><h3 name="Notes">Notes</h3>
<ul> </ul>
<h3 name="Specifications">Specifications</h3>
<ul> <li><a class="external" href="http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html" title="http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html">WebKit CSS transform specification</a></li>
</ul>
<h3 name="Browser_compatibility">Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> </tr> <tr> <td>Internet Explorer</td> <td>?</td> </tr> <tr> <td>Firefox</td> <td>3.1</td> </tr> <tr> <td>Opera</td> <td> <p>?</p> </td> </tr> <tr> <td>Safari</td> <td>?</td> </tr> </tbody>
</table>
<p> </p>
Revert to this revision