Transformations CSS

Comment travailler avec le CSStransformbiens

Les transformations vous permettent de traduire, faire pivoter, mettre à l'échelle et incliner des éléments, dans l'espace 2D ou 3D. Ils sont une fonctionnalité CSS très cool, surtout lorsqu'ils sont combinés avec des animations.

Transformations 2D

Letransformproperty accepte ces fonctions:

  • translate()pour déplacer des éléments
  • rotate()faire pivoter des éléments
  • scale()mettre à l'échelle des éléments en taille
  • skew()pour tordre ou incliner un élément
  • matrix()un moyen d'effectuer l'une des opérations ci-dessus en utilisant une matrice de 6 éléments, une syntaxe moins conviviale mais moins verbeuse

Nous avons également des fonctions spécifiques aux axes:

  • translateX()pour déplacer des éléments sur l'axe X
  • translateY()pour déplacer des éléments sur l'axe Y
  • scaleX()pour mettre à l'échelle des éléments en taille sur l'axe X
  • scaleY()pour mettre à l'échelle des éléments en taille sur l'axe Y
  • skewX()pour tordre ou incliner un élément sur l'axe X
  • skewY()pour tordre ou incliner un élément sur l'axe Y

Voici un exemple de transformation qui change le.boxla largeur de l'élément par 2 (en le dupliquant) et la hauteur par 0,5 (en la réduisant de moitié):

.box {
	transform: scale(2, 0.5);
}

transform-originpermet de définir l'origine (le(0, 0)coordonnées) pour la transformation, nous permettant de changer le centre de rotation.

Combinaison de plusieurs transformations

Vous pouvez combiner plusieurs transformations en séparant chaque fonction par un espace.

Par exemple:

transform: rotateY(20deg) scaleX(3) translateY(100px);

Transforme 3D

Nous pouvons aller plus loin et déplacer nos éléments dans un espace 3D plutôt que sur un espace 2D. Avec la 3D, nous ajoutons un autre axe, Z, qui ajoute de la profondeur aux visuels.

En utilisant leperspectivepropriété, vous pouvez spécifier la distance entre l'objet 3D et la visionneuse.

Exemple:

.3Delement {
  perspective: 100px;
}

perspective-origindétermine l'apparence de la position du spectateur, comment le regardons-nous sur les axes X et Y.

Nous pouvons maintenant utiliser des fonctions supplémentaires qui contrôlent l'axe Z, qui s'ajoutent aux autres transformations des axes X et Y:

  • translateZ()
  • rotateZ()
  • scaleZ()

et les raccourcis correspondantstranslate3d(),rotate3d()etscale3d()comme raccourcis pour utiliser letranslateX(),translateY()ettranslateZ()fonctions et ainsi de suite.

Téléchargez mon gratuitManuel CSS


Plus de didacticiels CSS:


Tech Wiki en ligne!