transform

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

Revision Content

{{ CSSMozExtensionRef() }}

{{ gecko_minversion_header("1.9.1") }}

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

 Example 1

Source image

<div style="width:200px; height:100px; border:1px solid black;
      -moz-transform: rotate(45deg); -moz-transform-origin: 51px 150px;">
  Some text!
</div>

Notes

Specifications

Browser compatibility

Browser Lowest Version  
Internet Explorer n/a
5.5

Microsoft's Matrix Filter 
Firefox 3.5 -moz-transform
Opera n/a  
Safari 3.1 -webkit-transform

 

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<p>{{ gecko_minversion_header("1.9.1") }}</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="/En/CSS/CSS_transform_functions" 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> <a class="internal" href="/@api/deki/files/2918/=transform-sample-1.html" title="/@api/deki/files/2918/=transform-sample-1.html">Example 1</a></p>
<p><img align="right" alt="Source image" class="internal" src="/@api/deki/files/2919/=transform-sample-1.png?size=webview"></p>
<pre>&lt;div style="width:200px; height:100px; border:1px solid black;
      -moz-transform: rotate(45deg); -moz-transform-origin: 51px 150px;"&gt;
  Some text!
&lt;/div&gt;
</pre>
<h3 name="Notes">Notes</h3>
<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> <th> </th> </tr> <tr> <td>Internet Explorer</td> <td>n/a<br> 5.5</td> <td><br> Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx">Matrix Filter</a> </td> </tr> <tr> <td>Firefox</td> <td>3.5</td> <td><code>-moz-transform</code></td> </tr> <tr> <td>Opera</td> <td>n/a</td> <td> </td> </tr> <tr> <td>Safari</td> <td>3.1</td> <td><code>-webkit-transform</code></td> </tr> </tbody>
</table>
<p> </p>
Revert to this revision