Transform-origin - Propriété CSS

Schéma de la syntaxe de transform-origin.

Description des termes utilisés sur le schéma :

• x, y et z sont des valeurs numériques suivies d'une des unités de dimension, ou, pour x et y, des pourcentages.

Description de la propriété transform-origin.

transform-origin définit le point d'origine pour les transformations, c'est à dire le point qui reste fixe pendant la transformation. Par exemple, dans le cas d'une rotation, le point d'origine sera le centre de rotation. Lorsque la transformation est une translation, le point d'origine est sans importance.

Reportez-vous également à la propriété transform-box qui définit la boîte de référence pour transform-origin.

Une présentation plus générale sur les transformations est consultable sur la page de la propriété transform.

Valeurs pour transform-origin.

• transform-origin: left center; x y

  Le point d'origine des transformations est positionné par rapport à ces deux valeurs. La première valeur (x) définissant la position horizontale, et la deuxième valeur (y), la position verticale. Si une seule valeur est indiquée, l'autre est prise égale à center.

  x peut prendre les valeurs left, center ou right.
  y peut prendre les valeurs top, center ou bottom.
  

  transform-origin:left top;

  transform-origin:left;
• transform-origin: 100px 20px; x y

  Le point d'origine est positionné en fonction de ces deux valeurs. Ce sont deux nombres positifs ou négatifs, suivis d'une unité de dimension (voir les unités de dimension). Si une seule valeur est indiquée, elle vaut pour la position horizontale, la position verticale étant prise égale à center. Ces valeurs peuvent être négatives ou supérieures aux dimension de l'élément, ce qui fixe un point d'origine à l'extérieur de l'élément.

  S'il s'agit de pourcentages, ils sont calculés par rapport aux dimensions de la boîte de référence, cette dernière étant définie par la propriété transform-box. Le premier pourcentage (x) est calculé par rapport à la largeur de la boîte de référence, et le deuxième (y) par rapport à la hauteur de la boîte de référence.

  transform-origin:40px 10px;

  transform-origin:20% -20%;
• transform-origin: 100px 20px 10px; x y z

  Une troisième valeur peut être indiquée, elle définit la hauteur du point d'origine (suivant l'axe Z, perpendiculaire à l'écran). Une valeur positive indique un point d'origine au dessus du plan de l'écran, tandis qu'une valeur négative indique un point d'origine plus profond que le plan de l'écran.

  Cette valeur z est un nombre suivi d'une unité de dimension absolue. Les pourcentages ne sont pas autorisés pour la valeur z. Lorsqu'elle n'est pas précisée, cette troisième valeur est fixée à 0px par défaut.

  Les deux premières valeurs peuvent prendre toutes les valeurs définies précédemment.

  Un effet de perspective a été ajouté sur l'exemple ci-dessous.

  transform-origin:left center 50px;
• transform-origin: initial; (50% 50%) transform-origin: inherit; transform-origin: revert; transform-origin: revertLayer; transform-origin: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de transform-origin.

L'exemple ci-dessous combien deux animations : une sur la propriété transform, ce qui produit la rotation rapide de l'élément, et l'autre sur la propriété transform-origin. Ces deux animations ont des durées différentes, ce qui donne l'impression d'une rotation mal équilibrée, bancale.

Exemple interactif avec la propriété transform-origin.

Le simulateur ci-après fait appel aux animations afin d'illustrer transform-origin. Pour observer l'effet de la valeur Z, choisissez "Rotation autour de l'axe X" ou "Rotation autour de l'axe Y".

Compatibilité des navigateurs avec transform-origin.

Les transformations, et donc la propriété transform-origin sont maintenant correctement prises en charge par tous les navigateurs.

Remarques :

(1) Ne supporte pas les transformations 2D sur les éléments SVG. Utilisez l'attribut transform à la place.

(2) Internet Explorer ne supporte pas transform-style:preserve-3d limitant ainsi l'imbrication des animations.

1

Transformations
2D

2

Transformations
3D

3

Propriété
transform-origin

Estimation de la prise en charge globale.

97%

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Histoire de la propriété transform-origin.

• Module CSS - Transformations - Niveau 1

  Ce module de spécification définit les transformations en 2D (dans le plan de l'écran) qu'il est possible d'appliquer aux éléments avec la propriété transform.
  Il définit également les fonctions relatives aux transformations (translation, rotation, écrasement, et effet de zoom).

  Concernant transform-origin. Première définition des propriétés relatives aux transformations en CSS, dont transform-origin.
  

  28 Février 2012

  Document de travail.

  

  14 Février 2019

  Candidat à la recommandation.

  

  

• Module CSS - Transformations - Niveau 2

  En plus des transformations 2D déjà présentées dans le niveau 1 de la spécification, ce module traite des transformations en 3D. Il introduit de nouvelles propriétés pour gérer la hauteur du point de vue et la restitution des effets 3D.
  Ce module introduit également les propriétés individuelles de rotation, translation et effet de zoom.

  Concernant transform-origin. Introduction des transformations en 3D.
  Pas de changement concernant directement la propriété transform-origin.
  

  03 Mars 2020

  Document de travail.

  

  

  

Voir aussi, concernant les transformations.

Le module "Module CSS - Transformations" (ou Module CSS - Transformations en anglais) décrit la propriété transform-origin, et regroupe également toutes les définitions concernant les transformations en CSS :

Propriétés :

Fonctions :