Propriété CSS transform-origin

La propriété CSS transform-origin définit le point autour duquel un élément est transformé — le pivot pour les rotations, l'ancre pour la mise à l'échelle, et le point de référence pour l'inclinaison.

Par défaut, chaque transformation s'effectue autour du centre de l'élément (50% 50%). Faites pivoter une boîte et elle tourne sur son propre milieu ; agrandissez-la et elle s'étend dans toutes les directions. transform-origin vous permet de déplacer ce pivot n'importe où — vers un coin, une bordure, ou même un point en dehors de la boîte — de sorte que la même transformation produit un mouvement totalement différent.

Cette page couvre la syntaxe, le comportement des valeurs par mots-clés, en pourcentage ou en longueur, la valeur optionnelle sur l'axe z pour la 3D, ainsi que des exemples pratiques que vous pouvez exécuter.

Pourquoi transform-origin est important

Une rotation a un aspect très différent selon l'emplacement de son pivot. Imaginez une aiguille d'horloge : la faire tourner autour de son centre décrit un petit cercle, mais la faire tourner autour de sa base fait balayer à son extrémité tout le cadran — même rotate(), origine différente.

C'est pourquoi transform-origin est essentiel pour :

Le mouvement de charnière ou de porte — faire pivoter autour d'une bordure plutôt que du centre.
La mise à l'échelle à partir d'un coin — faire grandir un menu depuis son coin supérieur gauche plutôt que depuis son milieu.
Les retournements de cartes 3D — l'associer avec le décalage z et la perspective.

La propriété transform-origin ne prend effet que lorsqu'une fonction de transformation est appliquée via la propriété transform — seule, elle ne fait rien. C'est l'une des propriétés CSS3.

Récapitulatif de la syntaxe

La valeur peut être spécifiée avec :

Mots-clés de décalage — left, center, right, top, bottom (ex. top left).
Longueurs — mesurées depuis le coin supérieur gauche de l'élément (ex. 0 0, 80px 40px).
Pourcentages — relatifs à la taille propre de l'élément (ex. 0% 0% est le coin supérieur gauche, 100% 100% est le coin inférieur droit).

Lorsque vous ne donnez qu'une seule valeur, la seconde prend par défaut la valeur center. Une troisième valeur définit la position sur l'axe z et ne concerne que les transformations 3D.

Info

Historiquement, le préfixe -webkit- était utilisé pour Safari, Chrome et les anciennes versions d'Opera. Les navigateurs modernes n'exigent plus de préfixes vendeurs pour cette propriété.

Valeur initiale	50% 50% 0
S'applique à	Les éléments transformables.
Héritée	Non.
Animable	Oui. Le degré est animable.
Version	CSS3
Syntaxe DOM	Object.style.transform-origin = "10% 30%";

Syntaxe

Valeurs CSS de transform-origin

transform-origin: x-offset y-offset z-offset | initial | inherit;

Exemple de la propriété transform-origin :

Exemple de code CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .big {
        position: relative;
        height: 300px;
        width: 300px;
        margin: 80px;
        padding: 5px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      .little {
        padding: 60px;
        position: absolute;
        border: 2px solid #666666;
        background-color: #8ebf42;
        -webkit-transform: rotate(35deg);
        -webkit-transform-origin: 70% 90%;
        transform: rotate(35deg);
        transform-origin: 70% 90%;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="big">
      <div class="little">Box</div>
    </div>
  </body>
</html>

Essayez vous-même »

Résultat

La petite boîte est pivotée de 35°, mais comme transform-origin est 70% 90% (zone inférieure droite), elle pivote autour de ce point plutôt que de son centre.

L'exemple suivant fait pivoter quatre boîtes identiques du même 25deg et ne change que transform-origin, afin que vous puissiez voir côte à côte comment chaque valeur déplace le pivot.

Exemple de transform-origin avec quatre valeurs :

Autre exemple de code CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eeeeee;
        font-size: 1.1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .container {
        margin: 10px auto;
        max-width: 700px;
      }
      .wrap {
        width: 150px;
        height: 150px;
        border: 2px solid #666666;
        display: inline-block;
        margin: 100px;
      }
      .box {
        width: 150px;
        height: 150px;
        position: relative;
        color: #eeeeee;
        text-align: center;
        line-height: 150px;
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
      }
      .a {
        background-color: #0747af;
      }
      .b {
        background-color: #40b530;
        -webkit-transform-origin: top left;
        transform-origin: top left;
      }
      .c {
        background-color: #666666;
        -webkit-transform-origin: 90% 120%;
        transform-origin: 90% 120%;
      }
      .d {
        background-color: #ffdb11;
        -webkit-transform-origin: 80px 40px;
        transform-origin: 80px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="container">
      <div class="wrap">
        <div class="box a">
          50% 50%
        </div>
      </div>
      <div class="wrap">
        <div class="box b">
          top left
        </div>
      </div>
      <div class="wrap">
        <div class="box c">
          90% 120%
        </div>
      </div>
      <div class="wrap">
        <div class="box d">
          80px 40px
        </div>
      </div>
    </div>
  </body>
</html>

Essayez vous-même »

En lisant les quatre boîtes : 50% 50% pivote sur le centre, top left pivote sur le coin supérieur gauche, 90% 120% utilise un point en dessous et à droite de la boîte, et 80px 40px mesure le pivot en pixels depuis le coin supérieur gauche.

Le décalage z pour les transformations 3D

La troisième valeur déplace le pivot le long de l'axe z (vers ou en s'éloignant du spectateur). Elle n'a d'effet visible qu'avec des fonctions de transformation 3D telles que rotateX() ou rotateY(), et doit être une longueur — les pourcentages ne sont pas autorisés pour la valeur z.

.card {
  /* pivot at the center, pushed 50px toward the viewer */
  transform: rotateY(45deg);
  transform-origin: center center 50px;
}

Pour que l'effet 3D soit visible, le parent a généralement besoin d'une valeur de perspective (et vous pouvez déplacer le point de fuite avec perspective-origin).

Valeurs

Valeur	Description
`x-offset`	Spécifie la position horizontale. Accepte des mots-clés (`left`, `center`, `right`), des longueurs ou des pourcentages.
`y-offset`	Spécifie la position verticale. Accepte des mots-clés (`top`, `center`, `bottom`), des longueurs ou des pourcentages.
`z-offset`	Spécifie la position en profondeur le long de l'axe z pour les transformations 3D. Accepte des valeurs de longueur.
`initial`	Définit cette propriété à sa valeur par défaut.
`inherit`	Hérite cette propriété de son élément parent.

Conseils et pièges

Elle ne fait rien seule. Si transform-origin semble n'avoir aucun effet, vérifiez que l'élément possède également une valeur transform — sans elle, il n'y a rien autour de quoi pivoter.
Les pourcentages sont relatifs à l'élément, pas à son parent : 100% 0% est le coin supérieur droit de l'élément lui-même.
L'ordre est x puis y, donc top left et left top sont équivalents (les mots-clés sont indépendants de l'ordre), mais 0% 100% (coin inférieur gauche) et 100% 0% (coin supérieur droit) ne le sont pas.
Animez les transformations, pas l'origine, pour un mouvement fluide. Modifier transform-origin en cours d'animation fait sauter l'élément ; définissez donc l'origine une fois pour toutes et animez la transition ou l'animation sur transform.

Propriétés associées

transform — applique la rotation, la mise à l'échelle, l'inclinaison ou la translation autour de laquelle l'origine pivote.
perspective et perspective-origin — nécessaires pour voir l'origine sur l'axe z en 3D.
transition et animation — animent les transformations dans le temps.

Pratique

La propriété transform-origin fonctionne uniquement avec

les éléments animables.les éléments transformables.les éléments positionnés.