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 - Fonction scale3d()

Description des fonctions scale3d(), scaleX(), scaleY() et scaleZ().

Ces fonctions définissent un changement de taille de l'élément (agrandissement ou réduction). scale3d() permet une mise à l'échelle suivant les trois axes, tandis que les autres fonctions ne travaillent que sur un seul axe. Pour une mise à l'échelle dans le plan de l'écran 2D (axes X ou Y), voir la fonction scale().

La propriété transform-origin définit l'origine de la mise à l'échelle, c'est à dire le point qui ne change pas d'emplacement. Par défaut ce point est le milieu de l'élément.

Ces fonctions peuvent être utilisées avec :

  • transform : Applique une transformation géométrique.

Syntaxe de ces fonctions de mise à l'échelle.

  • transform: scale3d(0.5, 1, 0.5); x y z

    x, y et z sont les coefficients à utiliser pour changer la taille de l'élément suivant l'axe correspondant. Les trois valeurs doivent être indiquées.

    Ce sont trois nombres sans unité inférieurs à 1 (réduction de la dimension) ou supérieurs (agrandissement).

    Les valeurs négatives sont acceptées et provoquent un retournement de l'élément (symétrie).

Simulateur.

Les modifications suivant l'axe Z, qui correspondent en fait à l'épaissseur de l'élément, ne sont pas visibles.

transform:
( x y z )
Résultat

Compatibilité et prise en charge par les navigateurs.

La plupart des navigateurs prennent correctement en charge les transformations 2D.

Afficher les versions antérieures   Afficher la version à venir