Accueil

Traduction

Tutoriel CSS - sommaire

Tutoriel CSS - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Les transformations 2D avec CSS

On parle de transformation lorsqu'un élément se déplace ou change de taille ou se déforme (inclinaison) ou pivote (rotation).
Une transformation peut porter sur une boite, une image. Elle peut être 2D ou 3D. Dans ce chapitre ne seront abordées que les transformations 2D.

Ci-dessous un élement de type block transformable et changement d'échelle sur clic.

Un titre transformable sur clic

Cliquez sur le titre ci-dessus et obsevez !

Le titre fait l'objet d'une transformation et plus précisément une rotation lorsqu'on clique dessus.

Première approche

Cliquez successivement sur chaque carré ci-dessous et observez ...


Le code CSS & HTML correspondant

Rappel : pour éviter un saut de ligne entre chaque boite DIV il suffit de leur appliquer la propriété display : inline-block.

La propriété transform peut être argumentée avec les commandes rotate(deg) / scaleX(x) / scaleY(y) / scale(x,y) / translateX(x) / translateY(y) / translate(x,y).
Les arguments x et y sont des pixels ; il faut préciser l'unité. Exemples : 200px, -100px
L'argument de la fonction rotate() est un angle en degrés ; il faut préciser l'unité. Exemples : 45deg, -30deg
Les valeurs peuvent être négatives.

Dans l'exemple ci-dessus je n'ai pas utilisé les commandes translateY(valeur négative) et rotate(valeur négative)
Un translateY(valeur négative) fait monter l'élément. Un rotate(-45 deg) par exemple, fait tourner l'élément vers la gauche.

Approfondissements - exemple 2

Il existe aussi les fonctions skewX() & skewY().
Par ailleurs on peut argumenter la propriété transform avec plusieurs commandes chainées !

Cliquez successivement sur chaque carte et observez ...

Le code CSS & HTML correspondant

Ici nous étudions deux nouvelles fonctions de la propriété transform : skewX & skewY.
Grâce à cette fonction vous pouvez transformer un rectangle en parallélogramme (côtés opposés restent parallèles mais les angles ne font plus 90°).
Aussi surprenant que cela paraisse skew(x,y) n'existe pas dans la nomenclature W3C même si elle acceptée sur certains navigateurs.

Comme vous pouvez le constater à la lecture du code CSS ci-dessus, vous pouvez aussi argumenter la propriété transform avec plusieurs commandes comme c'est le cas pour les quatre dernières cartes (les rois).

Donc lorsque vous argumentez la propriété transform avec plusieurs fonctions l'ordre des ces commandes est donc très important.

Origine de la transformation

Par défaut l'origine d'une transformation d'un élément est son centre mais elle peut être modifiée grâce à la propriété transform-origin

Exemple


Cliquez successivement les deux carrés ci-dessous.

Ils se transforment en losange mais on voit bien que le premier carré pivote autour de son centre alors que le second pivote à partir du coin haut gauche de la boite parente.

Le code CSS et HTML correspondant

Pour le deuxième carré (carré vert) j'ai demandé que l'origine de la transformation soit le coin supérieur gauche de la balise parente.

Appliquer des transformations CSS à des éléments SVG

On peut appliquer les transformations CSS à des éléments SVG.
Mais attention, pour des objets SVG, l'origine par défaut de la transformation est le coin supérieur gauche du canevas SVG. Alors que pour les éléments HTML l'origine par défaut de la transformation est le centre de l'objet.
En d'autres termes, pour des éléments HTML transform-origin vaut par défaut "center center" alors qu'en SVG transform-origin vaut par défaut "top left".

Pour en savoir plus : animer des objets SVG via CSS

Remarque

Les transformations présentées sont instantanées. Il serait préférable que le passage de l'état initial vers l'état final de l'élément se déroule en quelques secondes. C'est possible ! Il faut réaliser un transition sur une transformation.
C'est l'objet du chapitre suivant.