---
title: transform-origin
slug: Web/CSS/transform-origin
tags:
  - CSS
  - CSS Transoforms
  - Propriété CSS
  - Reference
  - transform-origin
  - 'valeur par défaut : center'
translation_of: Web/CSS/transform-origin
---
<div>{{CSSRef}}</div>

<p>La propriété <strong><code>transform-origin</code></strong> permet de modifier l'origine du repère pour les opérations de transformation d'un élément.</p>

<div>{{EmbedInteractiveExample("pages/css/transform-origin.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>Par exemple, l'origine par défaut pour la fonction <code>rotate()</code> est le centre de la rotation. Cette propriété est utilisée en :</p>

<ol>
 <li>Translatant l'élément avec l'opposé de la valeur fournie</li>
 <li>Appliquant la transformation souhaitée sur l'élément</li>
 <li>Translatant l'élément avec la valeur fournie pour cette propriété.</li>
</ol>

<p>Les valeurs qui ne sont pas définies explicitement sont réinitialisées avec les valeurs correspondantes.</p>

<p>Par défaut, l'origine d'une transformation est <code>center</code>.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush: css no-line-numbers">/* Utilisation d'une seule valeur */
transform-origin: 2px<em>;</em>
transform-origin: bottom;

/* x-offset y-offset */
transform-origin: 3cm 2px;

/* y-offset x-offset-keyword */
transform-origin: 2px left;

/* x-offset-keyword y-offset */
transform-origin: left 2px;

/* x-offset-keyword y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword x-offset-keyword */
transform-origin: top right;

/* x-offset y-offset z-offset */
transform-origin: 2px 30% 10px;

/* y-offset x-offset-keyword z-offset */
transform-origin: 2px left 10px;

/* x-offset-keyword y-offset z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword y-offset-keyword z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword x-offset-keyword z-offset */
transform-origin: bottom right 2cm;

/* Valeurs globales */
transform-origin: inherit;
transform-origin: initial;
transform-origin: unset;
</pre>

<p>La propriété <code>transform-origin</code> peut être définie en utiisant une, deux ou trois valeurs.</p>

<ul>
 <li>Avec une valeur, celle-ci doit être :
  <ul>
   <li>Une longueur (type {{cssxref("&lt;length&gt;")}})</li>
   <li>Un pourcentage (type {{cssxref("&lt;percentage&gt;")}}</li>
   <li>Un mot-clé parmi <code>left</code>, <code>center</code>, <code>right</code>, <code>top</code>, <code>bottom</code>.</li>
  </ul>
 </li>
 <li>Avec deux valeurs
  <ul>
   <li>La première valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi <code>left</code>, <code>center</code>, <code>right</code></li>
   <li>La seconde valeur doit être une longueur (type {{cssxref("&lt;length&gt;")}}), un pourcentage (type {{cssxref("&lt;percentage&gt;")}} ou un mot-clé parmi <code>top</code>, <code>center</code>, <code>bottom</code>.</li>
  </ul>
 </li>
 <li>Avec trois valeurs
  <ul>
   <li>Les deux premières valeurs doivent être structurées comme la syntaxe avec deux valeurs</li>
   <li>La troisième valeur doit être une longueur (type {{cssxref("length")}}</li>
  </ul>
 </li>
</ul>

<h3 id="Valeur">Valeur</h3>

<dl>
 <dt><code>x-offset</code></dt>
 <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
 <dt><code>offset-keyword</code></dt>
 <dd>Un mot-clé parmi <code>left</code>, <code>right</code>, <code>top</code>, <code>bottom</code> ou <code>center</code> qui décrit le décalage correspondant.</dd>
 <dt><code>y-offset</code></dt>
 <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} ou {{cssxref("&lt;percentage&gt;")}} qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
 <dt><code>x-offset-keyword</code></dt>
 <dd>Un mot-clé parmi <code>left</code>, <code>right</code> ou <code>center</code> qui décrit la distance, depuis le bord gauche de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
 <dt><code>y-offset-keyword</code></dt>
 <dd>Un mot-clé parmi <code>top</code>, <code>bottom</code> ou <code>center</code> qui décrit la distance, depuis le bord haut de la boîte, à laquelle l'origine de la transformation sera placée.</dd>
 <dt><code>z-offset</code></dt>
 <dd>Une valeur du type {{cssxref("&lt;length&gt;")}} (et jamais une valeur du type {{cssxref("&lt;percentage&gt;")}}, sinon la déclaration serait invalide) qui décrit la distance, depuis l'œil de l'utilisateur, de l'origine de la transformation sur l'axe de profondeur (z)..</dd>
</dl>

<p>Les mots-clés sont des raccourcis qui correspondent aux valeurs {{cssxref("&lt;percentage&gt;")}} suivantes :</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Mot-clé</th>
   <th scope="col">Valeur</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>left</code></td>
   <td><code>0%</code></td>
  </tr>
  <tr>
   <td><code>center</code></td>
   <td><code>50%</code></td>
  </tr>
  <tr>
   <td><code>right</code></td>
   <td><code>100%</code></td>
  </tr>
  <tr>
   <td><code>top</code></td>
   <td><code>0%</code></td>
  </tr>
  <tr>
   <td><code>bottom</code></td>
   <td><code>100%</code></td>
  </tr>
 </tbody>
</table>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

{{csssyntax}}

<h2 id="Exemples">Exemples</h2>

<p>Voir la page sur <a class="internal" href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">l'utilisation des transformations CSS</a> pour des exemples supplémentaires.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Code</th>
   <th>Exemple</th>
  </tr>
  <tr>
   <td>
    <p><code>transform: none;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_none">
    <pre class="brush: html">
&lt;div class="box1"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box1 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: none;
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_none', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate_only">
    <pre class="brush: html">
&lt;div class="box2"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box2 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: rotate(30deg);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_rotate_only', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);<br>
     transform-origin: 0 0;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate">
    <pre class="brush: html">
&lt;div class="box3"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box3 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 0 0;
transform: rotate(30deg);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_rotate', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);<br>
     transform-origin: 100% 100%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate_with_percentage">
    <pre class="brush: html">
&lt;div class="box4"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box4 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: 100% 100%;
transform: rotate(30deg);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_rotate_with_percentage', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: rotate(30deg);<br>
     transform-origin: -10em -30em;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_rotate_with_em">
    <pre class="brush: html">
&lt;div class="box5"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box5 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform-origin: -10em -30em;
transform: rotate(30deg);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_rotate_with_em', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: scale(1.9);</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_scale_only">
    <pre class="brush: html">
&lt;div class="box6"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box6 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_scale_only', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: scale(1.9);<br>
     transform-origin: 0 0;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_scale_without_origin">
    <pre class="brush: html">
&lt;div class="box7"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box7 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
transform-origin: 0 0;
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_scale_without_origin', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: scale(1.9);<br>
     transform-origin: 100% -30%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_scale">
    <pre class="brush: html">
&lt;div class="box8"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box8 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: scale(1.9);
transform-origin: 100% -30%;
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_scale', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: skewX(50deg);<br>
     transform-origin: 100% -30%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_skew_x">
    <pre class="brush: html">
&lt;div class="box9"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box9 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewX(50deg);
transform-origin: 100% -30%;
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_skew_x', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
  <tr>
   <td>
    <p><code>transform: skewY(50deg);<br>
     transform-origin: 100% -30%;</code></p>
   </td>
   <td>
    <div class="hidden" id="transform_skew_y">
    <pre class="brush: html">
&lt;div class="box10"&gt;&amp;nbsp;&lt;/div&gt;
</pre>

    <pre class="brush: css">
.box10 {
margin: 0.5em;
width: 3em;
height: 3em;
border: solid 1px;
background-color: palegreen;
transform: skewY(50deg);
transform-origin: 100% -30%;
}
</pre>
    </div>

    <p>{{EmbedLiveSample('transform_skew_y', '', '120', '', '', 'no-button') }}</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Transforms', '#transform-origin-property', 'transform-origin')}}</td>
   <td>{{Spec2('CSS3 Transforms')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("css.properties.transform-origin")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Utiliser les transformations CSS</a></li>
 <li><a href="https://css-tricks.com/almanac/properties/t/transform-origin/">https://css-tricks.com/almanac/properties/t/transform-origin/</a></li>
</ul>