mozilla

Revision 21690 of transform

  • Revision slug: CSS/transform
  • Revision title: transform
  • Revision id: 21690
  • Created:
  • Creator: Jürgen Jeka
  • Is current revision? No
  • Comment 1 words added

Revision Content

{{ CSSMozExtensionRef() }}

{{ gecko_minversion_header("1.9.1") }}

Summary

The -moz-transform CSS 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

Live Example

pre {
     width: 33em;
     border: solid red;
    -moz-transform: translate(100px) rotate(40deg);
    -moz-transform-origin: 60% 100%;
    -webkit-transform: translate(100px) rotate(40deg);
    -webkit-transform-origin: 60% 100%;
}

Specifications

Browser compatibility

Browser Lowest Version  Support of
Internet Explorer --- ---
5.5 Microsoft's Matrix Filter
Firefox (Gecko) 3.5 (1.9.1) -moz-transform
Opera --- ---
Safari (WebKit) 3.1 (525) -webkit-transform

 

Revision Source

<p>{{ CSSMozExtensionRef() }}</p>
<p>{{ gecko_minversion_header("1.9.1") }}</p>
<h3>Summary</h3>
<p>The<code> -moz-transform </code>CSS 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>Syntax</h3>
<pre> -moz-transform:  &lt;transform-function&gt; [&lt;transform-function&gt;]* | none
</pre>
<h3>Values</h3>
<dl> <dt>transform-function</dt> <dd>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.</dd> <dt>none</dt> <dd>Specifies that no transform should be applied.</dd>
</dl>
<h3>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>
<h4>Live Example</h4>
<pre style="width:33em; border:solid red; -moz-transform:translate(100px) rotate(40deg); -moz-transform-origin:60% 100%; -webkit-transform:translate(100px) rotate(45deg); -webkit-transform-origin:60% 100%;">pre {
     width: 33em;
     border: solid red;
    -moz-transform: translate(100px) rotate(40deg);
    -moz-transform-origin: 60% 100%;
    -webkit-transform: translate(100px) rotate(40deg);
    -webkit-transform-origin: 60% 100%;
}
</pre>
<h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-2d-transforms/" title="http://www.w3.org/TR/css3-2d-transforms/">CSS3 2D Transforms</a> </li>
</ul>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>Lowest Version</th> <th> Support of</th> </tr> <tr> <td rowspan="2">Internet Explorer</td> <td>---</td> <td rowspan="1">---</td> </tr> <tr> <td>5.5</td> <td rowspan="1">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 (Gecko)</td> <td>3.5 (1.9.1)</td> <td><code>-moz-transform</code></td> </tr> <tr> <td>Opera</td> <td>---</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>3.1 (525)</td> <td><code>-webkit-transform</code></td> </tr> </tbody>
</table>
<p> </p>
Revert to this revision