La propriété CSS transform

La propriété CSS transform permet de déplacer, agrandir, réduire, incliner ou faire tourner un élément sans modifier sa place de base dans le HTML. Dans ce cours, vous allez découvrir les principales fonctions de transformation les plus utiles en 2D.

À quoi sert la propriété transform ?

La propriété transform sert à modifier l'apparence visuelle d'un élément sans réécrire son contenu HTML.

Avec elle, vous pouvez par exemple déplacer un bloc, le faire pivoter, changer son échelle ou l'incliner.

Ce point est important : une transformation agit surtout sur le rendu. Elle ne remplace donc pas un vrai positionnement CSS.

						
							<div class="carte">Carte</div>
						
					

						
							.carte{
								transform: rotate(8deg);
							}
						
					

Ici, le bloc est simplement tourné visuellement.

translate pour déplacer un élément

La famille translate sert à déplacer un élément.

C'est souvent la première transformation que l'on utilise, parce qu'elle est facile à lire : on indique juste dans quelle direction l'élément doit se décaler.

Les unités les plus courantes sont px, %, em et rem.

translateX

translateX() déplace l'élément sur l'axe horizontal. Une valeur positive l'envoie vers la droite. Une valeur négative l'envoie vers la gauche.

						
							<div class="bloc-x">Bloc</div>
						
					

						
							.bloc-x{
								transform: translateX(40px);
							}
						
					

translateY

translateY() travaille sur l'axe vertical. Une valeur positive descend l'élément. Une valeur négative le remonte.

						
							<div class="bloc-y">Bloc</div>
						
					

						
							.bloc-y{
								transform: translateY(20px);
							}
						
					

translate pour tout regrouper en une ligne CSS

En 2D, vous pouvez regrouper le déplacement horizontal et vertical avec translate().

La première valeur correspond à l'axe horizontal, la seconde à l'axe vertical.

						
							<div class="bloc-xy">Bloc</div>
						
					

						
							.bloc-xy{
								transform: translate(30px, 15px);
							}
						
					

scale pour gérer la taille d'un élément

La famille scale sert à agrandir ou réduire un élément.

Une valeur de 1 garde la taille d'origine. Une valeur supérieure à 1 agrandit l'élément. Une valeur comprise entre 0 et 1 le réduit.

scaleX

scaleX() agit uniquement sur la largeur.

Ici, le bloc est étiré horizontalement.

				
					.bloc{
						transform: scaleX(1.5);
					}
				
			

scaleY

scaleY() agit uniquement sur la hauteur.

				
					.bloc{
						transform: scaleY(1.4);
					}
				
			

scale pour tout regrouper en une ligne CSS

Avec scale(), vous pouvez utiliser une seule valeur pour agrandir uniformément un élément, ou deux valeurs pour gérer la largeur et la hauteur séparément.

						
							<div class="bloc-scale">Bloc</div>
						
					

						
							.bloc-scale{
								transform: scale(1.2, 0.8);
							}
						
					

rotate pour faire tourner un élément

La famille rotate sert à faire pivoter un élément.

En général, on utilise l'unité deg pour exprimer l'angle.

rotate pour tout regrouper en une ligne CSS

Dans la plupart des cas, rotate() suffit largement.

Cette fonction correspond à la rotation 2D classique.

				
					.bloc{
						transform: rotate(15deg);
					}
				
			

skew

La famille skew sert à incliner un élément.

Le résultat donne souvent une impression de parallélogramme.

skewX

skewX() incline l'élément selon l'axe horizontal.

				
					.bloc{
						transform: skewX(-18deg);
					}
				
			

skewY

skewY() incline l'élément selon l'axe vertical.

				
					.bloc{
						transform: skewY(12deg);
					}
				
			

skew pour tout regrouper en une ligne CSS

Avec skew(), vous pouvez définir l'inclinaison sur les deux axes d'un seul coup.

						
							<div class="bloc-skew">Bloc</div>
						
					

						
							.bloc-skew{
								transform: skew(-15deg, 6deg);
							}
						
					

Cumuler plusieurs fonctions

L'un des grands intérêts de transform est que vous pouvez enchaîner plusieurs fonctions dans une seule déclaration.

Par exemple, un élément peut être déplacé, puis tourné, puis agrandi.

				
					.carte{
						transform: translateX(20px) rotate(8deg) scale(1.1);
					}
				
			

Attention ! L'ordre des fonctions compte. Un translate() suivi d'un rotate() ne produit pas toujours le même résultat qu'un rotate() suivi d'un translate().

Quand vous débutez, le plus simple est de construire vos transformations petit à petit, une fonction après l'autre.

Voilà l'idée générale à retenir :

• translate déplace,
• scale change l'échelle,
• rotate fait pivoter,
• skew incline,

Une fois ces familles bien comprises, la propriété transform devient un outil très puissant pour enrichir vos interfaces.