transform-origin

  • Raccourci de la révision : CSS/transform-origin
  • Titre de la révision : transform-origin
  • ID de la révision : 236984
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire création de la page transform-origin; page created, 549 words added

Contenu de la révision

{{ CSSRef() }}

Résumé

La propriété CSS transform-origin permet de modifier l'origine pour les transformations d'un élément. Par exemple, l'origine de transformation de la fonction rotate() est le centre de rotation. (Cette propriété est appliquée en faisant translater l'élément de l'opposé de la valeur spécifiée, puis en appliquant la transformation et en translatant de la valeur spécifiée.)

<style type="text/css"></style>
  • {{ Xref_cssinitial() }} : 50% 50%
  • S'applique à :tous les éléments blocs et en-ligne
  • {{ Xref_cssinherited() }} : non
  • Pourcentages : renvoie à la taille de la boîte
  • Média : {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} :valeur absolue pour <longueur>, sinon un pourcentage

Syntaxe

transform-origin:  [ <pourcentage> | <longueur> | left | center | right ]
                   [ <pourcentage> | <longueur> | top | center | bottom ] ?
transform-origin:  [ left | center | right ] || [ top | center | bottom ]

Valeurs

Accepte une ou deux valeurs.

  • Une valeur définit la position horizontale, la position verticale est fixée à 50%.
  • Deux valeurs définissent d'abord la position horizontale puis la position verticale.

La combinaison de mots-clés, de valeurs de {{ Xref_csslength() }}, ou de {{ Xref_csspercentage() }} sont permises, mais si les mots-clés sont mélangés avec d'autres valeurs, left et right ne peuvent être utilisés que pour la première valeur, et top et bottom ne peuvent être utilisés que pour la seconde valeur. Les positions négatives sont acceptées.

<pourcentage>
En utilisant la paire de valeurs 0% 0%, (ou simplement 0 0) l'origine de transformation est le coin supérieur gauche de la boîte. La paire de valeurs 100% 100% place l'origine dans le coin inférieur droit. Dans une paire de valeurs de 14% 84%, le point à 14% de la pargeur et 84% de la hauteur est l'origine.
<longueur>
Avec la paire de valeur 2cm 1cm, l'origine est placée 2cm à droite et 1cm en-dessous du coin supérieur gauche de l'élément.
top left | left top
Identique à 0 0
top | top center | center top
Identique à 50% 0
right top | top right
Identique à 100% 0
left | left center | center left
Identique à 0 50%
center | center center
Identique à 50% 50% (valeur par défaut)
right | right center | center right
Identique à 100% 50%
bottom left | left bottom
Identique à 0 100%
bottom | bottom center | center bottom
Identique à 50% 100%
bottom right | right bottom
Identique à 100% 100%

Exemples

Voir Utilisation des transformations CSS pour des exemple.

Exemples en direct

transform: none;  
transform: rotate(30deg);  
transform: rotate(30deg);
transform-origin: 0 0;
 
transform: rotate(30deg);
transform-origin: 100% 100%;
 
transform: rotate(30deg);
transform-origin: -10em -30em;
 
transform: scale(1.9);  
transform: scale(1.9);
transform-origin: 0 0;
 
transform: scale(1.9);
transform-origin: 100% -30%;
 
transform: skew(50deg);  
transform: skew(50deg);
transform-origin: 0 0;
 
transform: skew(50deg);
transform-origin: 100% 100%;
 

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") }}
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Note : Internet Explorer 5.5 ou plus supporte un filtre matriciel (en) propriétaire qui permet d'obtenir l'effet similaire.

Voir également

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

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-origin</code> permet de modifier l'origine pour les transformations d'un élément. Par exemple, l'origine de transformation de la fonction <code>rotate()</code> est le centre de rotation. (Cette propriété est appliquée en faisant translater l'élément de l'opposé de la valeur spécifiée, puis en appliquant la transformation et en translatant de la valeur spécifiée.)</p>
<nobr>
<style type="text/css"><![CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}






]]></style>
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }} :</dfn> <code>50% 50%</code></li> <li><dfn>S'applique à :</dfn>tous les éléments blocs et en-ligne</li> <li><dfn>{{ Xref_cssinherited() }} :</dfn> non</li> <li><dfn>Pourcentages :</dfn> renvoie à la taille de la boîte</li> <li><dfn>Média :</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }} :</dfn>valeur absolue pour <code>&lt;longueur&gt;</code>, sinon un pourcentage</li>
</ul>
</nobr>
<p><nobr></nobr></p><nobr>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="eval">transform-origin:  [ &lt;pourcentage&gt; | &lt;longueur&gt; | left | center | right ]
                   [ &lt;pourcentage&gt; | &lt;longueur&gt; | top | center | bottom ] ?
</pre>
<pre>transform-origin:  [ left | center | right ] || [ top | center | bottom ]
</pre>
<h3 id="Valeurs">Valeurs</h3>
<p>Accepte une ou deux valeurs.</p>
<ul> <li>Une valeur définit la position horizontale, la position verticale est fixée à <code>50%</code>.</li> <li>Deux valeurs définissent d'abord la position horizontale puis la position verticale.</li>
</ul>
<p>La combinaison de mots-clés, de valeurs de {{ Xref_csslength() }}, ou de {{ Xref_csspercentage() }} sont permises, mais si les mots-clés sont mélangés avec d'autres valeurs, <code>left</code> et <code>right</code> ne peuvent être utilisés que pour la première valeur, et <code>top</code> et <code>bottom</code> ne peuvent être utilisés que pour la seconde valeur. Les positions négatives sont acceptées.</p>
<dl> <dt>&lt;pourcentage&gt;</dt> <dd>En utilisant la paire de valeurs <code>0% 0%</code>, (ou simplement <code>0 0</code>) l'origine de transformation est le coin supérieur gauche de la boîte. La paire de valeurs <code>100% 100%</code> place l'origine dans le coin inférieur droit. Dans une paire de valeurs de <code>14% 84%</code>, le point à 14% de la pargeur et 84% de la hauteur est l'origine.</dd> <dt>&lt;longueur&gt;</dt> <dd>Avec la paire de valeur<code> 2cm 1cm</code>, l'origine est placée 2cm à droite et 1cm en-dessous du coin supérieur gauche de l'élément.</dd> <dt>top left | left top</dt> <dd>Identique à <code>0 0</code></dd> <dt>top | top center | center top</dt> <dd>Identique à <code>50% 0</code></dd> <dt>right top | top right</dt> <dd>Identique à <code>100% 0</code></dd> <dt>left | left center | center left</dt> <dd>Identique à <code>0 50%</code></dd> <dt>center | center center</dt> <dd>Identique à <code>50% 50%</code> (valeur par défaut)</dd> <dt>right | right center | center right</dt> <dd>Identique à <code>100% 50%</code></dd> <dt>bottom left | left bottom</dt> <dd>Identique à <code>0 100%</code></dd> <dt>bottom | bottom center | center bottom</dt> <dd>Identique à <code>50% 100%</code></dd> <dt>bottom right | right bottom</dt> <dd>Identique à <code>100% 100%</code></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> pour des exemple.</p>
<h3 id="Exemples_en_direct">Exemples en direct</h3>
<table class="standard-table"> <tbody> <tr> <td style="width:22em"><code>transform: none;</code></td> <td> </td> </tr> <tr> <td><code>transform: rotate(30deg);</code></td> <td> </td> </tr> <tr> <td><code>transform: rotate(30deg);<br> transform-origin: 0 0;</code></td> <td> </td> </tr> <tr> <td><code>transform: rotate(30deg);<br> transform-origin: 100% 100%;</code></td> <td> </td> </tr> <tr> <td><code>transform: rotate(30deg);<br> transform-origin: -10em -30em;</code></td> <td> </td> </tr> <tr style="height:5em"> <td><code>transform: scale(1.9);</code></td> <td> </td> </tr> <tr style="height:5em"> <td><code>transform: scale(1.9);<br> transform-origin: 0 0;</code></td> <td> </td> </tr> <tr style="height:5em"> <td><code>transform: scale(1.9);<br> transform-origin: 100% -30%;</code></td> <td> </td> </tr> <tr> <td><code>transform: skew(50deg);</code></td> <td> </td> </tr> <tr> <td><code>transform: skew(50deg);<br> transform-origin: 0 0;</code></td> <td> </td> </tr> <tr> <td><code>transform: skew(50deg);<br> transform-origin: 100% 100%;</code></td> <td> </td> </tr> </tbody>
</table>
<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-origin-property" title="http://dev.w3.org/csswg/css3-transforms/#transform-origin-property">CSS Transforms</a></td> <td>{{ Spec2('CSS3 Transforms') }}</td> <td> </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> </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>
<div class="note"><strong>Note</strong> : Internet Explorer 5.5 ou plus supporte un <a class="external" href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85,loband%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533014(VS.85,loband).aspx">filtre matriciel (en)</a> propriétaire qui permet d'obtenir l'effet similaire.</div>
<h2 id="Voir_.C3.A9galement">Voir également</h2>
<ul> <li>{{ cssxref("transform") }}</li> <li><a class="internal" href="/En/CSS/Using_CSS_transforms" title="en/CSS/Using CSS transforms">Using CSS transforms</a></li>
</ul>
<p>{{ languages( { "ja": "ja/CSS/-moz-transform-origin","en":"en/CSS/transform-origin" } ) }}</p></nobr>
Revenir à cette révision