Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété transform-origin

Syntaxes 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 eux valeurs.

    Ce sont deux nombres positifs ou négatifs, suivis d'une unité de dimension (voir les unités de dimensions en CSS).

    S'il s'agit de pourcentages, ils sont calculés par rapport aux dimensions de l'élément. 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. Un 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.

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

  • transform-origin: initial;

    La valeur initiale est center center.

  • transform-origin: unset; transform-origin: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

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 :
 
X
Y
Z

Voir aussi...

Transformations géométriques - 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.
  • transform : Applique une transformation géométrique.
  • transform-style : Rendu des éléments soumis à une transformation 3D.

Transformations géométriques - 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 de l'élément en 2D (dans le plan de l'écran).
  • rotate3d() : Définit une rotation 3D de l'é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.