Utilisation des transformations CSS

  • Raccourci de la révision : CSS/Utilisation_des_transformations_CSS
  • Titre de la révision : Utilisation des transformations CSS
  • ID de la révision : 236949
  • Créé :
  • Créateur : BenoitL
  • Version actuelle ? Non
  • Commentaire page created, 271 words added

Contenu de la révision

{{ Traduction en cours }}

{{ gecko_minversion_header("1.9.1") }}

Firefox 3.5 (Gecko 1.9.1) a introduit le support des transformations CSS ; celles-ci sont mises en œuvre au travers d'un ensemble de propriétés CSS permettant d'appliquer des transformations linéaires affines sur les éléments HTML. Parmi ces transformations figurent le rotation, l'inclinaison, la mise à l'échelle et la translation. Ces propriétés sont basées sur une proposition de l'équipe WebKit. Depuis lors, il s'agit d'un brouillon de travail au W3C.

Mozilla gère actuellement les propriétés {{ Cssxref("-moz-transform") }} et {{ Cssxref("-moz-transform-origin") }}.

Note : Pour l'instant, l'axe Z n'est pas géré, et par conséquent la perspective, la rotation 3D, la mise à l'échelle 3D et les transformations 3D ne le sont pas non plus.

Exemple : rotation

Cet exemple crée un iframe affichant la page d'accueil de Google, tournée de 90 degrés depuis son coin inférieur gauche.

View live example 
View screenshot of example

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

Exemple : déformation et translation

This example creates an iframe that lets you use Google's home page, skewed by 10 degrees on the X axis.

View live example 
View screenshot of example

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

Voir également

  • {{ Cssxref("-moz-transform") }}, including CSS transform functions
  • {{ Cssxref("-moz-transform-origin") }}

{{ HTML5ArticleTOC() }}

{{ languages( { "en": "en/CSS/Using_CSS_transforms", "ja": "ja/CSS/Using_CSS_transforms", "es": "es/CSS/Uso_de_CSS_transforms" } ) }}

Source de la révision

<p>{{ Traduction en cours }}</p>
<p>{{ gecko_minversion_header("1.9.1") }}</p>
<p>Firefox 3.5 (Gecko 1.9.1) a introduit le support des transformations CSS ; celles-ci sont mises en œuvre au travers d'un ensemble de propriétés CSS permettant d'appliquer des transformations linéaires affines sur les éléments HTML. Parmi ces transformations figurent le rotation, l'inclinaison, la mise à l'échelle et la translation. Ces propriétés sont basées sur une <a class="external" href="http://webkit.org/blog/130/css-transforms/" title="http://webkit.org/blog/130/css-transforms/">proposition de l'équipe WebKit</a>. Depuis lors, il s'agit d'un <a class="external" href="http://www.w3.org/TR/css3-2d-transforms/" title="http://www.w3.org/TR/css3-2d-transforms/">brouillon de travail au W3C</a>.</p>
<p>Mozilla gère actuellement les propriétés {{ Cssxref("-moz-transform") }} et {{ Cssxref("-moz-transform-origin") }}.<a class="internal" href="/En/CSS/CSS_transform_functions" title="/en/CSS/CSS transform functions"><br>
</a></p>
<div class="note"><strong>Note :</strong> Pour l'instant, l'axe Z n'est pas géré, et par conséquent la perspective, la rotation 3D, la mise à l'échelle 3D et les transformations 3D ne le sont pas non plus.</div>
<h2>Exemple : rotation</h2>
<p>Cet exemple crée un iframe affichant la page d'accueil de Google, tournée de 90 degrés depuis son coin inférieur gauche.</p>
<p><a class="internal" href="/@api/deki/files/2921/=rotated-google-sample.html" title="/@api/deki/files/2921/=rotated-google-sample.html">View live example</a> <br>
<a class="internal" href="/@api/deki/files/2920/=google-rotated.png" title="/@api/deki/files/2920/=google-rotated.png">View screenshot of example</a></p>
<pre class="script">&lt;div style="-moz-transform: rotate(90deg); -moz-transform-origin: bottom left;"&gt;
  &lt;iframe src="http://www.google.com/" width="500" height="600"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>
<h2>Exemple : déformation et translation</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="external" href="/@api/deki/files/2922/=skewed-google-sample.html" title="http://developer.mozilla.org/editor/fckeditor/core/editor/@api/deki/files/2922/=skewed-google-sample.html">View live example</a> <br>
<a class="internal" href="/@api/deki/files/2923/=skewed-google.png" title="/@api/deki/files/2923/=skewed-google.png">View screenshot of example</a></p>
<pre class="script">&lt;div style="-moz-transform: skewx(10deg) translatex(150px);
            -moz-transform-origin: bottom left;"&gt;
  &lt;iframe src="http://www.google.com/" width="600" height="500"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>
<h2>Voir également</h2>
<ul> <li>{{ Cssxref("-moz-transform") }}, including CSS transform functions</li> <li>{{ Cssxref("-moz-transform-origin") }}</li>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "en": "en/CSS/Using_CSS_transforms", "ja": "ja/CSS/Using_CSS_transforms", "es": "es/CSS/Uso_de_CSS_transforms" } ) }}</p>
Revenir à cette révision