Transform-origin - Propriété CSS

transform-origin

Résumé des caractéristiques de la propriété transform-origin

Description rapide
Définit le point d'origine pour les transformations.
Statut
Standard
S'applique à
Tous les éléments transformables.
Utilisable sur
HTML, SVG
Pourcentages
Calculés par rapport à la taille de la boite de référence, elle même définie par la propriété transform-box
Valeur initiale
50% 50%
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété transform-origin passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Transformations
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma de la syntaxe de transform-origin.

transform-origin - Syntax DiagramSyntax diagram of the transform-origin CSS property. left left center center right right length-x length-x top top center center bottom bottom length-y length-y length-z length-ztransform-origin:;transform-origin:;
Schéma syntaxique de la propriété transform-origin.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs. Télécharger le schéma en SVG

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

  • length-x, length-y et length-z sont des valeurs numériques suivies d'une des unités de dimension, ou 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.

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

    Si une seule valeur est indiquée, l'autre est fixée à center.

  • 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).

    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.
    Les pourcentages peuvent être négatifs ou supérieurs à 100%, ce qui fixe un point d'origine à l'extérieur de l'élément.

  • 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 à 0 par défaut.

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

  • 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 ayant 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 suivant l'axe X".

animation :
transform-origin :
transform-origin :
transform-origin :
Point d'origine de la transformation

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.

Colonne 1
Prise en charge générale des transformation 2D, incluant les rotations, les translations d'éléments, etc.
Colonne 2
Prise en charge générale des animations en 3D, incluant le support pour la gestion de la perspective et le support pour la propriété backface-visibility.
Colonne 3
Support par les navigateurs de la propriété transform-origin qui définit le point d'origine des transformations (celui qui reste inchangé).

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

    Première définition des propriétés relatives aux transformations en CSS, dont transform-origin.
    WD
    28 Février 2012
    Document de travail.
    CR
    14 Février 2019
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Transformations - Niveau 2

    Introduction des transformations en 3D.
    Pas de changement concernant directement la propriété transform-origin.
    WD
    03 Mars 2020
    Document de travail.
    CR
    PR
    REC

Voir aussi, concernant les transformations.

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

Colonne 1
Prise en charge générale des transformation 2D, incluant les rotations, les translations d'éléments, etc.
Colonne 2
Prise en charge générale des animations en 3D, incluant le support pour la gestion de la perspective et le support pour la propriété backface-visibility.
Colonne 3
Support par les navigateurs de la propriété transform-origin qui définit le point d'origine des transformations (celui qui reste inchangé).

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.

Propriétés :

backface-visibility
Visibilité de la face arrière de l'élément (pendant sa rotation).
perspective
Effet de perspective appliqué à un élément ayant subi une transformation 3D.
perspective-origin
Position de l'observateur dans le cas d'une déformation 3D avec perspective.
rotate
Définit une rotation à appliquer à l'élément.
scale
Définit une mise à l'échelle de l'élément (agrandissement ou réduction).
transform
Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
transform-box
Définit la boîte de référence pour les transformations.
transform-style
Définit comment sont rendus les éléments soumis à une transformation 3D.
translate
Applique une translation à un élément (un déplacement linéaire).

Fonctions :

matrix()
Applique une transformation composite à un élément (translations, rotations...).
matrix3d()
Applique une série de transformations 3D à un élément.
perspective()
Définit la hauteur de l'observateur dans le cas d'une transformation 3D.
rotate()
Définit une rotation à appliquer à l'élément en 2D (dans le plan de l'écran).
rotate3d()
Définit une rotation 3D à appliquer à un élément autour d'un axe quelconque en 3D.
rotateX()
Définit une rotation de l'élément autour de l'axe X (en 3D),
rotateY()
Définit une rotation 3D de l'élément autour de l'axe Y.
rotateZ()
Définit une rotation de l'élément autour de l'axe Z.
scale()
Définit un agrandissement ou une réduction de l'élément.
scale3d()
Définit une mise à l'échelle en 3D.
scaleX()
Définit une mise à l'échelle suivant l'axe X.
scaleY()
Définit une mise à l'échelle suivant l'axe Y.
scaleZ()
Définit une mise à l'échelle suivant l'axe Z.
skew()
Définit une inclinaison de l'élément suivant les axes X et/ou Y.
skewX()
Définit une inclinaison de l'élément suivant l'axe X.
skewY()
Définit une inclinaison de l'élément suivant l'axe Y.
translate()
Définit une translation (un déplacement) à un élément.
translate3d()
Définit une translation en 3D suivant un ou plusieurs des axes X,Y et Z.
translateX()
Définit une translation suivant l'axe X (horizontalement).
translateY()
Définit une translation suivant l'axe Y (verticalement).
translateZ()
Définit une translation suivant l'axe Z (perpendiculaire à l'écran).