Les transformations CSS3

1. La propriété

Pour effectuer une transformation, vous devrez utiliser la propriété transform. Cette propriété utilise ensuite des fonctions pour appliquer telle ou telle transformation.

2. Le point de référence

Par défaut, toutes les transformations ont comme point de référence le centre de l’élément. Ce point de référence sert de départ pour les calculs des transformations.

Nous pouvons changer ce point de référence avec la propriété transform-origin. La valeur spécifiée indique alors le point de référence.

Les valeurs acceptées sont :

Voilà ce que donnerait une rotation avec le point de référence par défaut, au centre de l’élément :

Voilà un exemple de la modification du point d’origine au coin haut gauche de l’élément, suivie d’une rotation :

.rotation { 
    transform-origin: left top; 
    transform: rotate(32deg); 
} 

Voilà la modification apportée par la modification du point de référence :

1. Sur les deux axes

La fonction translate permet d’effectuer un déplacement, une translation, sur une distance spécifiée, par rapport à sa position d’origine et selon le point de référence.

Cet exemple déplace l’image de 250 pixels horizontalement et 50 pixels verticalement :

.deplacement { 
    transform: translate(250px,50px); 
} 

Cette classe s’applique sur une image :

<p><img src="lion.jpg" alt="Lion" class="deplacement" /></p> 

Voilà la transformation effectuée :

2. Sur un seul axe

Vous pouvez aussi utiliser les deux fonctions de déplacement sur un seul axe :

Exemple d’un déplacement horizontal de 20 pixels :

.deplacement { 
    transform: translateX(20px); 
} 

1. La mise à l’échelle proportionnelle

La fonction scale permet une mise à l’échelle d’un élément sur une échelle de 0 à 1, 1 étant la taille initiale.

Voilà un exemple d’une classe qui effectue une mise à l’échelle proportionnelle à 50 % de la taille originale.

.echelle { 
    transform: scale(.5); 
} 

2. La mise à l’échelle non proportionnelle

Si vous spécifiez deux valeurs, la première est la mise à l’échelle horizontale, la deuxième, la mise à l’échelle verticale.

Dans cet exemple, la mise à l’échelle horizontale est de 50 %, la mise à l’échelle verticale est de 20 %.

.echelle { 
    transform: scale(.5,.2); 
} 

3. La mise à l’échelle dans une seule direction

Vous pouvez utiliser les fonctions :

Dans cet exemple, la mise à l’échelle est uniquement horizontale :

.echelle { 
    transform: scaleX(.5); 
} 

1. La déformation sur les deux axes

La fonction skew permet d’effectuer une déformation de l’élément sur les deux axes. L’unité peut s’exprimer en degrés : deg ou en radians : rad.

Voilà un exemple avec une déformation horizontale de 20 degrés et une déformation verticale de 5 degrés :

.deformation { 
    transform: skew(20deg,-5deg); 
} 

Voilà la transformation effectuée :

2. La déformation sur un seul axe

Vous pouvez utiliser les fonctions :

Dans cet exemple, la déformation est uniquement horizontale :

.deformation { 
transform: skewX(-20deg); 
} 

Voilà l’affichage :

1. CSS 3.0 Maker

CSS 3.0 Maker (https://www.css3maker.com/css3-transform.html) vous permet d’utiliser les quatre transformations vues :

2. CSS3 Generator

CSS3 Generator (http://css3generator.com/), avec l’option Transform, vous donne accès aux transformations.

3. WestCIV

WestCIV (http://www.westciv.com/tools/transforms/index.html) vous propose l’accès à toutes les transformations que nous avons vues.