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 : 338353
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ Traduction_en_cours() }}

En modificiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations afines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

Propriétés des transformations CSS

Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin')}}.

Exemples

Exemple : la rotation

{{Cssxref("transform-origin")}}
Spécifie la position de l'origine. Par défaut, celle-ci est dans le coin supérieur gauche de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
{{cssxref("transform")}}
Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requit par l'opération de composition.
Marqueur d'avancement de traduction

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>En modificiant l'espace des coordonnées, les <strong>transformations CSS</strong> permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations afines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.</p>
<h2>Propriétés des transformations CSS</h2>
<p>Deux propriétés majeures sont utilisées pour définir les transformations CSS : {{cssxref("transform")}} et {{cssxref("transform-origin')}}.</p>
<h2>Exemples</h2>
<h3>Exemple : la rotation</h3>
<dl>
  <dt>
    {{Cssxref("transform-origin")}}</dt>
  <dd>
    Spécifie la position de l'origine. Par défaut, celle-ci est dans le coin supérieur gauche de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.</dd>
  <dt>
    {{cssxref("transform")}}</dt>
  <dd>
    Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requit par l'opération de composition.</dd>
</dl>
<h6>Marqueur d'avancement de traduction</h6>
<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") }}.</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 id="Exemple_.3A_rotation">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>&nbsp;<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;
&nbsp; &lt;iframe src="http://www.google.com/" width="500" height="600"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>
<h2 id="Exemple_.3A_d.C3.A9formation_et_translation">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>&nbsp;<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);
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  -moz-transform-origin: bottom left;"&gt;
&nbsp; &lt;iframe src="http://www.google.com/" width="600" height="500"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</pre>
<h2 id="Voir_.C3.A9galement">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