Accueil

Traduction

Tutoriel CSS - sommaire

Sommaire partiellement masqué - faites défiler !

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

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

Rappel : la pseudo classe :active signifie "sur survol".

Le code HTML

Chaque élément DIV se voit affecter la classe "boite" est un ID différent qui détermine la couleur de fond.
J'ai utilisé la propriété CSS transform avec différentes fonctions.

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.

Approfondissements - exemple 2

Il existe aussi les fonctions skewX() & skewY().
Par ailleurs on peut argumenter la propriété transform avec plusieurs fonctions 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 fonctions 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 crucial.

Origine de la transformation

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

Exemple


Cliquez successivement les trois 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 de son coin haut gauche et le troisième à partir du coin bas droit.

Le code CSS et HTML correspondant

Pour le premier carré l'origine de la rotation est le centre de cet élément.
Pour le deuxième carré l'origine de la transformation est le coin supérieur gauche du carré.
Pour le troisième carré l'origine de la rotation est le coin inférieur droit de cet élément.

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 une transformation avec transition c'est à dire sur une certaine durée.
C'est l'objet du chapitre suivant.