transform

  • Raccourci de la révision : CSS/transform
  • Titre de la révision : transform
  • ID de la révision : 291165
  • Créé :
  • Créateur : teoli
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS transform permet de modifier les coordonnées spatiales du modèle de formatage visuel de CSS. En l'utilisant, les éléments pourront subir des translations, rotations, homothéties ou être inclinées selon les valeurs définies.

  • {{ xref_cssinitial() }} : none
  • S'applique à :tous les éléments bloc et en ligne
  • {{ xref_cssinherited() }} : non
  • Média : {{ xref_cssvisual() }}
  • {{ xref_csscomputed() }}:comme spécifiée, les longueurs relatives étant converties en longueurs absolues

 

Syntaxe

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

Préfixes : voir le tableau de compatibilité ci-dessous pour plus de détails concernant les préfixes à utiliser pour cette fonctionnalité.

Valeurs

transform-function
Une ou plusieurs des {{ anch("fonctions de tranformation CSS") }} sont appliquées. Voir ci-dessous.
none
Spécifie qu'aucune transformation ne doit être appliquée.

Exemples

Voir Utilisation des transformations CSS.

Exemple en direct

 

 

 

pre {
     width: 33em;
     border: solid red;

    -moz-transform: translate(100px) rotate(20deg);
    -moz-transform-origin: 60% 100%;

    -webkit-transform: translate(100px) rotate(20deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(20deg); 
    -o-transform-origin:60% 100%;

    -ms-transform: translate(100px) rotate(20deg);
    -ms-transform-origin: 60% 100%;

    transform: translate(100px) rotate(20deg);
    transform-origin: 60% 100%;
}



Fonctions de transformation CSS

La propriété CSS transform permet que le système de coordonnées utilisé par un élément soit manipulé par une ou des fonctions de transformation. Ces fonctions sont décrites ci-dessous.

matrix

transform:  matrix(a, c, b, d, tx, ty)

/* Où a, b, c, d construisent la matrice de transformation
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   et tx, ty sont les valeurs de translation.  */

Spécifie une transformation 2D grâce à six valeurs. Ceci est équivalent à appliquer la transformation matrix [a b c d tx ty].

Note : Gecko (Firefox) accepte une valeur de {{ xref_csslength() }} pour tx et ty. Webkit (Safari, Chrome) et Opera supportent actuellement un {{ xref_cssnumber() }} sans unité pour tx et ty.

Exemples en direct

 

 

 background: gold;  width: 30em;

    -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
     -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
 background: wheat;
 max-width: intrinsic;

    -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);
 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
     -ms-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);


Voir également

rotate

transform:  rotate(angle);       /* un <angle>, p. ex.  rotate(30deg) */

Applique une rotation dans le sens horaire autour de son origine (comme spécifiée par la propriété {{ Cssxref("transform-origin") }}) de l'angle spécifié. L'opération correspond à la matrice [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

scale

transform:  scale(sx[, sy]);     /* un ou deux <nombre>s sans unité, p. ex.  scale(2.1,4) */

Spécifie une homothétie 2D décrite par [sx, sy]. Si sy n'est pas spécifiée, il est supposé qu'elle est égale à sx.

scaleX

transform:  scaleX(sx);          /* un <nombre> sans unité, p. ex.  scaleX(2.7) */

Spécifie une homothétie utilisant le vecteur [sx, 1].

scaleY

transform:  scaleY(sy)           /* un <nombre> sans unité, p. ex.  scaleY(0.3) */

Spécifie une homothétie utilisant le vecteur [1, sy].

skew {{ not_standard_inline() }}

transform:  skew(ax[, ay])       /* un ou deux <angle>s, p. ex.  skew(30deg,-10deg) */

Incline l'élément autour des axes X et Y des angles spécifiés. Si ay n'est pas définie, aucune inclinaison n'est réalisée suivant l'axe Y.

Note : la fonction skew() était présente dans les premiers brouillons. Elle a depuis été retirée et est toujours présente sous une forme préfixée dans certaines implémentations. Ne l'utilisez pas.

skewX

transform:  skewX(angle)         /* un <angle>, p. ex.  skewX(-30deg) */

Incline l'élément autour de l'axe X du l'angle spécifié.

skewY

transform:  skewY(angle)         /* un <angle>, p. ex.  skewY(4deg) */

Incline l'élément autour de l'axe Y du l'angle spécifié.

translate

transform:  translate(tx[, ty])  /* une ou deux <longueur>s */

Spécifie une translation 2D par le vecteur [tx, ty]. Si ty n'est pas spécifié, la valeur supposée est zéro.

translateX

transform:  translateX(tx)       /* voir <longuieur> pour les valeurs possibles */

Translate l'élément de la quantité définie selon l'axe X.

translateY

transform:  translateY(ty)       /* voir <longueur> pour les valeurs possibles */

Translate l'élément de la quantité définie selon l'axe Y.

Spécifications

Spécification État Commentaire
CSS Transforms {{ Spec2('CSS3 Transforms') }}  

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base {{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }} 10.0
9.0 {{ property_prefix("-ms") }}
10.5{{ property_prefix("-o") }} 3.1{{ property_prefix("-webkit") }}
Support de la 3D 10.0{{ property_prefix("-moz") }} 12.0{{ property_prefix("-webkit") }} 10.0 {{ CompatNo() }} 4.0{{ property_prefix("-webkit") }}
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Notes

Internet Explorer 5.5 et plus supporte un filtre matriciel propriétaire qui peut être utilisé pour réaliser des effets similaires.

Le support expérimental de skew() à été retiré de Gecko 14.0.

Voir également

{{ languages( {"en": "en/CSS/transform", "ja": "ja/CSS/-moz-transform" ,"zh-cn": "cn/CSS/transform" } ) }}

Source de la révision

<p>{{ CSSRef() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La propriété CSS <code>transform</code> permet de modifier les coordonnées spatiales du modèle de formatage visuel de CSS. En l'utilisant, les éléments pourront subir des translations, rotations, homothéties ou être inclinées selon les valeurs définies.</p>
<p><nobr></nobr></p>
<ul class="cssprop">
  <li><nobr><dfn>{{ xref_cssinitial() }} :</dfn> none</nobr></li>
  <li><nobr><dfn>S'applique à :</dfn>tous les éléments bloc et en ligne</nobr></li>
  <li><nobr><dfn>{{ xref_cssinherited() }} :</dfn> non</nobr></li>
  <li><nobr><dfn>Média :</dfn> {{ xref_cssvisual() }}</nobr></li>
  <li><nobr><dfn>{{ xref_csscomputed() }}:</dfn>comme spécifiée, les longueurs relatives étant converties en longueurs absolues</nobr></li>
</ul>
<p>&nbsp;</p>
<h2 id="Syntaxe">Syntaxe</h2>
<pre>
transform:  &lt;transform-function&gt; [&lt;transform-function&gt;]* | none</pre>
<p><strong>Préfixes :</strong> voir le tableau de compatibilité ci-dessous pour plus de détails concernant les préfixes à utiliser pour cette fonctionnalité.</p>
<h2 id="Valeurs">Valeurs</h2>
<dl>
  <dt>
    transform-function</dt>
  <dd>
    Une ou plusieurs des {{ anch("fonctions de tranformation CSS") }} sont appliquées. Voir ci-dessous.</dd>
  <dt>
    <code>none</code></dt>
  <dd>
    Spécifie qu'aucune transformation ne doit être appliquée.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>Voir <a href="/fr/CSS/Utilisation_des_transformations_CSS" title="fr/CSS/Utilisation_des_transformations_CSS">Utilisation des transformations CSS</a>.</p>
<h4 id="Exemple_en_direct">Exemple en direct</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<pre style="width:33em; border:solid red; -moz-transform:translate(100px) rotate(20deg); -moz-transform-origin:60% 100%; -webkit-transform:translate(100px) rotate(20deg); -webkit-transform-origin:60% 100%; -o-transform:translate(100px) rotate(20deg); -o-transform-origin:60% 100%; -ms-transform:translate(100px) rotate(20deg); -ms-transform-origin:60% 100%; transform:translate(100px) rotate(20deg); transform-origin:60% 100%;">
pre {
     width: 33em;
     border: solid red;

    -moz-transform: translate(100px) rotate(20deg);
    -moz-transform-origin: 60% 100%;

    -webkit-transform: translate(100px) rotate(20deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(20deg); 
    -o-transform-origin:60% 100%;

    -ms-transform: translate(100px) rotate(20deg);
    -ms-transform-origin: 60% 100%;

    transform: translate(100px) rotate(20deg);
    transform-origin: 60% 100%;
}
</pre>
<h2 id="
__
__Fonctions_de_transformation_CSS"><br />
  <br />
  Fonctions de transformation CSS</h2>
<p>La propriété CSS <code>transform</code> permet que le système de coordonnées utilisé par un élément soit manipulé par une ou des <strong>fonctions de transformation</strong>. Ces fonctions sont décrites ci-dessous.</p>
<h3 id="matrix">matrix</h3>
<pre>
transform:  matrix(a, c, b, d, tx, ty)

/* Où a, b, c, d construisent la matrice de transformation
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   et tx, ty sont les valeurs de translation.  */
</pre>
<p>Spécifie une transformation 2D grâce à six valeurs. Ceci est équivalent à appliquer la transformation <strong>matrix [a b c d tx ty]</strong>.</p>
<div class="note">
  <strong>Note :</strong> Gecko (Firefox) accepte une valeur de {{ xref_csslength() }} pour <strong>tx</strong> et <strong>ty</strong>. Webkit (Safari, Chrome) et Opera supportent actuellement un {{ xref_cssnumber() }} sans unité pour <strong>tx</strong> et <strong>ty</strong>.</div>
<h4 id="Exemples_en_direct">Exemples en direct</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<pre style="background:gold; width:400px; -moz-transform:matrix(1, -0.2, 0, 1, 0, 0); -webkit-transform:matrix(1, -0.2, 0, 1, 0, 0); -o-transform:matrix(1, -0.2, 0, 1, 0, 0); -ms-transform:matrix(1, -0.2, 0, 1, 0, 0); transform:matrix(1, -0.2, 0, 1, 0, 0); ">
 background: gold;  width: 30em;

    -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
      -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
     -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
         transform: matrix(1, -0.2, 0, 1, 0, 0);
</pre>
<pre style="background:wheat; max-width:intrinsic; max-width:-moz-fit-content; -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0); -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0); -o-transform: matrix(1, 0, 0.6, 1, 250, 0); -ms-transform: matrix(1, 0, 0.6, 1, 250, 0); transform: matrix(1, 0, 0.6, 1, 250, 0);">
 background: wheat;
 max-width: intrinsic;

    -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);
 -webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
      -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
     -ms-transform: matrix(1, 0, 0.6, 1,  250, 0);
         transform: matrix(1, 0, 0.6, 1,  250, 0);
</pre>
<h4 id="
__Voir_.C3.A9galement"><br />
  Voir également</h4>
<ul>
  <li><a class="external" href="http://en.wikipedia.org/wiki/Linear_transformation#Examples_of_linear_transformation_matrices">Examples of linear transformation matrices (en)</a> Wikipedia</li>
  <li><a class="external" href="http://www.mathamazement.com/Lessons/Pre-Calculus/08_Matrices-and-Determinants/coordinate-transformation-matrices.html">Coordinate transformation matrices (en)</a> mathamazement.com</li>
  <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">Microsoft's matrix filter (en)</a> MSDN</li>
</ul>
<h3 id="rotate">rotate</h3>
<pre class="eval">
transform:  rotate(angle);       /* un &lt;angle&gt;, p. ex.  rotate(30deg) */
</pre>
<p>Applique une rotation dans le sens horaire autour de son origine (comme spécifiée par la propriété {{ Cssxref("transform-origin") }}) de l'<code>angle</code> spécifié. L'opération correspond à la matrice <strong>[cos(angle) sin(angle) -sin(angle) cos(angle) 0 0]</strong>.</p>
<h3 id="scale">scale</h3>
<pre class="eval">
transform:  scale(sx[, sy]);     /* un ou deux &lt;nombre&gt;s sans unité, p. ex.  scale(2.1,4) */
</pre>
<p>Spécifie une homothétie 2D décrite par <strong>[sx, sy]</strong>. Si <code>sy</code> n'est pas spécifiée, il est supposé qu'elle est égale à <code>sx</code>.</p>
<h3 id="scaleX">scaleX</h3>
<pre class="eval">
transform:  scaleX(sx);          /* un &lt;nombre&gt; sans unité, p. ex.  scaleX(2.7) */
</pre>
<p>Spécifie une homothétie utilisant le vecteur <strong>[sx, 1]</strong>.</p>
<h3 id="scaleY">scaleY</h3>
<pre class="eval">
transform:  scaleY(sy)           /* un &lt;nombre&gt; sans unité, p. ex.  scaleY(0.3) */
</pre>
<p>Spécifie une homothétie utilisant le vecteur<strong> [1, sy]</strong>.</p>
<h3 id="skew">skew {{ not_standard_inline() }}</h3>
<pre class="eval">
transform:  skew(ax[, ay])       /* un ou deux &lt;angle&gt;s, p. ex.  skew(30deg,-10deg) */
</pre>
<p>Incline l'élément autour des axes X et Y des angles spécifiés. Si <code>ay</code> n'est pas définie, aucune inclinaison n'est réalisée suivant l'axe Y.</p>
<div class="note">
  <strong>Note :</strong> la fonction <code>skew()</code> était présente dans les premiers brouillons. Elle a depuis été retirée et est toujours présente sous une forme préfixée dans certaines implémentations. Ne l'utilisez pas.</div>
<h3 id="skewX">skewX</h3>
<pre class="eval">
transform:  skewX(angle)         /* un &lt;angle&gt;, p. ex.  skewX(-30deg) */
</pre>
<p>Incline l'élément autour de l'axe X du l'<code>angle</code> spécifié.</p>
<h3 id="skewY">skewY</h3>
<pre class="eval">
transform:  skewY(angle)         /* un &lt;angle&gt;, p. ex.  skewY(4deg) */
</pre>
<p>Incline l'élément autour de l'axe Y du l'<code>angle</code> spécifié.</p>
<h3 id="translate">translate</h3>
<pre class="eval">
transform:  translate(tx[, ty])  /* une ou deux &lt;longueur&gt;s */
</pre>
<p>Spécifie une translation 2D par le vecteur <strong>[tx, ty]</strong>. Si <code>ty</code> n'est pas spécifié, la valeur supposée est zéro.</p>
<h3 id="translateX">translateX</h3>
<pre class="eval">
transform:  translateX(tx)       /* voir &lt;longuieur&gt; pour les valeurs possibles */
</pre>
<p>Translate l'élément de la quantité définie selon l'axe X.</p>
<h3 id="translateY">translateY</h3>
<pre class="eval">
transform:  translateY(ty)       /* voir &lt;longueur&gt; pour les valeurs possibles */
</pre>
<p>Translate l'élément de la quantité définie selon l'axe Y.</p>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr style="background-color: rgb(255, 204, 255);">
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaire</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="external" href="http://dev.w3.org/csswg/css3-transforms/#transform-property" title="http://dev.w3.org/csswg/css3-transforms/#transform-property">CSS Transforms</a></td>
      <td>{{ Spec2('CSS3 Transforms') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatVersionUnknown() }} {{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("1.9.1") }}{{ property_prefix("-moz") }}</td>
        <td>10.0<br />
          9.0 {{ property_prefix("-ms") }}</td>
        <td>10.5{{ property_prefix("-o") }}</td>
        <td>3.1{{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td>Support de la 3D</td>
        <td>10.0{{ property_prefix("-moz") }}</td>
        <td>12.0{{ property_prefix("-webkit") }}</td>
        <td>10.0</td>
        <td>{{ CompatNo() }}</td>
        <td>4.0{{ property_prefix("-webkit") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes">Notes</h3>
<p>Internet Explorer 5.5 et plus supporte un <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx">filtre matriciel</a> propriétaire qui peut être utilisé pour réaliser des effets similaires.</p>
<p>Le support expérimental de <code>skew()</code> à été retiré de Gecko 14.0.</p>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul>
  <li>{{ cssxref("transform-origin") }}</li>
  <li><a href="/fr/CSS/Utilisation_des_transformations_CSS" title="fr/CSS/Utilisation_des_transformations_CSS">Utilisation des transformations CSS</a></li>
  <li><a class="external" href="http://paulirish.com/2010/introducing-css3please/#comment-36380">Plus d'information (en)</a> sur les problèmes concernant CSS3 Rotation et le filtre matriciel sur le blogue de Paul Irish.</li>
  <li><a class="external" href="http://plugins.jquery.com/project/jquery-transform">Un plugin jQuery de tranformations 2D</a> compatibles avec plusieurs navigateurs</li>
</ul>
<p>{{ languages( {"en": "en/CSS/transform",&nbsp;"ja": "ja/CSS/-moz-transform"&nbsp;,"zh-cn": "cn/CSS/transform"&nbsp;} ) }}</p>
Revenir à cette révision