Transforms CSS
Les transitions fixent la durée d’un changement. Transform fixe où vont les pixels : glisser un chip, faire tourner une icône, agrandir un badge au survol — sans pousser les voisins comme margin ou top.
Ce que transform modifie
transform applique une carte 2D (puis 3D) à la boîte peinte. La place dans le flux reste en général la même. translate() convient aux micro-mouvements : hover, ouvert/fermé, petits ajustements.
Une propriété, plusieurs fonctions — pas de listes à virgules dans une seule valeur transform ; enchaînez avec des espaces : transform: translateX(1rem) rotate(8deg) scale(1.05);
Fonctions 2D essentielles
📊 Fonctions transform 2D en bref
| Fonction | Rôle courant |
|---|---|
translate(x, y) / translateX / translateY |
Déplacer visuellement sans reflow |
rotate(angle) |
Tourner icônes et chevrons (deg, turn) |
scale(x, y) / scale(n) |
Accent au hover — valeurs modestes |
skew(x, y) |
Inclinaison rare — petits angles |
Angles en deg ou turn. Les pourcentages dans translate() sont relatifs à la taille de l’élément.
translate d’abord
Pour un petit décalage visuel, préférez translate à top/margin. Avec la transition de la leçon précédente, le mouvement est souvent plus fluide.
.chip {
display: inline-block;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #e0e7ff;
color: #1e3a8a;
transition: transform 0.2s ease, background-color 0.2s ease;
}
.chip:hover,
.chip:focus-visible {
transform: translateY(-0.15rem);
background: #c7d2fe;
}
Le chip monte visuellement ; la boîte de ligne reste. Avec un margin-top négatif, les voisins sautent.
rotate et scale ensemble
Badges et icônes combinent souvent un petit scale et un rotate. Des angles serrés restent professionnels.
.badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.875rem;
transition: transform 0.25s ease;
}
.badge:hover {
transform: scale(1.06);
}
.chevron {
display: inline-block;
transition: transform 0.2s ease;
}
.menu-open .chevron {
transform: rotate(180deg);
}
scale(1.06) = accent ; scale(2) = erreur fréquente. rotate(180deg) = « ouvert » — via une classe.
transform-origin — pivot
Par défaut le pivot est au centre. transform-origin le déplace — bas-gauche comme une porte, 50% 100% pour un onglet.
.panel-tilt {
transform-origin: 50% 100%;
transition: transform 0.35s ease;
}
.panel-tilt.is-open {
transform: rotateX(12deg);
}
Léger rotateX pour le vocabulaire. Le 3D complet est dans 3D Transforms optionnel — ici l’essentiel est origin.
Avec transition ; évitez le layout
Mettez transition sur la règle de base et animez transform (et opacity). Respectez prefers-reduced-motion: reduce.
À essayer
- Soulevez un bouton avec
translateY(-0.2rem)— comparez avecmargin-top. - Tournez le chevron de
180degavec.is-open. transform-origin: left centeret petitrotate.- Enchaînez
translateX(0.5rem) scale(1.04)dans un seultransform. - Émulez reduced motion.
Erreurs fréquentes
top/marginau lieu detranslatepour le lift- Gros
rotatesur de larges conteneurs - Oublier
transform-origin scale(0)sans plan d’accessibilité- 3D lourd alors que le 2D suffit
Résumé
transformdéplace la boîte peinte ; le flux reste en général- Enchaînez les fonctions dans un transform
transform-origin= pivot- Associez transition et transform
- Suite : Animations CSS (
@keyframes)
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut