Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

CSS — Transformations : translate, rotate, scale et mouvement réduit | SovranCode

Contenu du coursCSS — Transformations · 26 leçons

Les bases de CSS

CSS — Introduction CSS — Sélecteurs CSS — Cascade et spécificité CSS — Unités CSS — Couleurs CSS — Fonctions CSS — Variables

Boîtes et mise en page

CSS — Modèle de boîte CSS — Display CSS — Positionnement CSS — Z-index et empilement CSS — Flexbox CSS — Grid

Couleurs et typographie

CSS — Arrière-plans CSS — Bordures et ombres CSS — Typographie

Un CSS adaptable et durable

CSS — Media queries CSS — Container queries CSS — Architecture CSS — Accessibilité

États et mouvements

CSS — Pseudo-classes CSS — Pseudo-éléments CSS — Transformations CSS — Transitions CSS — Animations CSS — Débordements

CSS60 min

CSS — Transformations

Déplacez, faites pivoter ou redimensionnez visuellement une boîte sans repousser ses voisines. Comprenez l’ordre des transformations et leurs effets sur les repères de positionnement et l’empilement.

Une transformation change le repère utilisé pour dessiner un élément, sans réorganiser les boîtes autour de lui. Une transition anime le passage d’une valeur de propriété à une autre ; une animation par étapes peut définir plusieurs états intermédiaires. Le mouvement doit aider à comprendre un état ou une hiérarchie, rester prévisible et respecter les préférences de la personne.

Distinguer déplacement visuel et mise en page

Repérez les propriétés animées, le décalage au survol et la règle prefers-reduced-motion. Cherchez ce qui change visuellement et ce qui conserve sa place dans le flux avant de modifier le code.

.card { transition: translate 160ms ease, border-color 160ms ease; } .card:hover { translate: 0 -.2rem; } @media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { translate: none; } }

Les bons réflexes

Nommez les propriétés à animer plutôt que d’utiliser all.
Gardez le focus et l’état compréhensibles même sans mouvement.
Prévoyez une variante à mouvements réduits qui conserve les informations et les actions.

ATELIER CSS · ENVIRON 34 MIN

Utiliser le mouvement pour rendre un changement d’état lisible

Comprenez l’exemple, prévoyez le résultat, puis modifiez le code. Poursuivez avec une correction, un exercice en autonomie et deux questions pour faire le point.

Les transformations modifient le dessin, pas la place réservée dans le flux

translate, rotate et scale changent le repère dans lequel l’élément est dessiné. La mise en page conserve la place de la boîte avant transformation : une carte déplacée peut donc recouvrir sa voisine sans la repousser. Ces effets conviennent à une légère mise en valeur, mais ne remplacent pas une disposition de page. L’ordre compte dans une liste de fonctions transform : translate(...) rotate(...) peut donner un résultat différent de rotate(...) translate(...). Les transformations peuvent aussi créer un bloc conteneur et un contexte d’empilement. En ajouter une uniquement pour une supposée accélération peut donc changer le repère des descendants positionnés et leur empilement.

Une transition relie une valeur de départ à une valeur d’arrivée

Une transition accompagne le changement d’une propriété animable en calculant des valeurs intermédiaires pendant une durée, selon une courbe de progression et un éventuel délai. Nommez les propriétés plutôt que d’utiliser transition: all, qui peut animer par accident de futures modifications. Les propriétés qui changent la mise en page peuvent provoquer des calculs répétés ; les transformations et opacity sont souvent plus fluides, mais mesurez les performances dans l’interface réelle. Une transition ne doit pas retarder une information essentielle ni donner l’impression qu’un contrôle ne répond pas. L’état final doit rester compréhensible si l’animation est désactivée, interrompue ou ne démarre pas.

Concevoir aussi la variante à mouvements réduits

La préférence prefers-reduced-motion indique qu’il faut limiter les mouvements non essentiels. Elle ne demande pas de masquer le contenu ni de supprimer les changements d’état. Remplacez les grands déplacements, les rotations continues ou la parallaxe par un changement immédiat ou un repère sans mouvement. Ciblez les propriétés du composant concerné plutôt que d’imposer partout des durées minuscules avec !important : ces règles globales peuvent perturber les événements d’animation ou d’autres composants. Mettez en pause les animations décoratives continues lorsqu’elles ne sont pas visibles, évitez les clignotements et prévoyez des commandes pour les mouvements prolongés ou répétés.

Activez l’émulation de mouvements réduits et comparez le comportement au focus. Dans une règle temporaire utilisant transform, inversez l’ordre des fonctions rotate(...) et translate(...), puis observez le résultat.

Votre espace de pratique CSS

Modifiez les règles dans style. Avec un compte, votre travail est synchronisé ; sans compte, il reste sur cet appareil.

Code

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { padding:2rem; font:1rem/1.6 system-ui; color:#142536; }
.card { max-width:32rem; padding:1.5rem; border:3px solid #8da0b3; transition:translate 160ms ease,border-color 160ms ease; }
.card:is(:hover,:focus-within) { translate:0 -.25rem; border-color:#174986; }
a:focus-visible { outline:3px solid #b45f00; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .card { transition:none; } .card:is(:hover,:focus-within) { translate:none; } }
</style>
</head>
<body>
<main><h1>Un mouvement qui aide à comprendre</h1><article class="card"><h2>Une mise en page adaptable</h2><p>Survolez cette carte ou atteignez son lien au clavier. Le changement de bordure conserve la mise en valeur lorsque les mouvements sont réduits.</p><a href="#notes">Lire les notes</a></article><p id="notes">Testez la préférence de mouvements réduits du système ou son émulation dans le navigateur.</p></main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Exercice CSS</title>
<style>
body { padding:2rem; font:1rem/1.6 system-ui; color:#142536; }
.card { max-width:32rem; padding:1.5rem; border:3px solid #8da0b3; transition:translate 160ms ease,border-color 160ms ease; }
.card:is(:hover,:focus-within) { translate:0 -.25rem; border-color:#174986; }
a:focus-visible { outline:3px solid #b45f00; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .card { transition:none; } .card:is(:hover,:focus-within) { translate:none; } }
</style>
</head>
<body>
<main><h1>Un mouvement qui aide à comprendre</h1><article class="card"><h2>Une mise en page adaptable</h2><p>Survolez cette carte ou atteignez son lien au clavier. Le changement de bordure conserve la mise en valeur lorsque les mouvements sont réduits.</p><a href="#notes">Lire les notes</a></article><p id="notes">Testez la préférence de mouvements réduits du système ou son émulation dans le navigateur.</p></main>
</body>
</html>

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Ouvrir l’aperçu

Chargement du travail enregistré…

Modifiez le CSS dans style et observez l’aperçu. Votre travail s’enregistre automatiquement ; vous pouvez aussi en télécharger une copie.

DU CODE À CORRIGER

Comprendre l’erreur

Expliquez le problème et proposez votre correction avant de consulter la solution.

.card { transition: all 1s; }
.card:hover { margin-top:-20px; }

Voir la correction et son explication

.card { transition: translate 160ms ease, border-color 160ms ease; }
.card:hover { translate: 0 -.25rem; border-color:#174986; }
@media (prefers-reduced-motion:reduce) { .card { transition:none; } .card:hover { translate:none; } }

La correction nomme les propriétés animées et utilise un déplacement visuel au lieu d’une marge qui réorganise les éléments voisins. La variante à mouvements réduits applique immédiatement le changement de bordure, sans déplacement.

À VOUS DE JOUER

Créer sans recopier l’exemple

Créez une carte et un indicateur d’ouverture avec une transition qui aide à comprendre leur état. Notez les valeurs de départ et d’arrivée, puis ajoutez et testez une variante à mouvements réduits.

Code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Utiliser le mouvement pour rendre un changement d’état lisible — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Utiliser le mouvement pour rendre un changement d’état lisible</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Utiliser le mouvement pour rendre un changement d’état lisible — exercice</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui; }
    /* Écrivez votre solution ici. */
  </style>
</head>
<body>
  <main>
    <h1>Utiliser le mouvement pour rendre un changement d’état lisible</h1>
    <p>Remplacez ce contenu par la structure nécessaire à votre solution.</p>
  </main>
</body>
</html>

Résultat

Les points à vérifier

L’interaction reste compréhensible lorsque toutes les transitions sont désactivées.Seules les propriétés explicitement choisies sont animées.Le mouvement ne change pas l’ordre du contenu, ne piège pas le focus et ne décale pas la mise en page autour du composant.

Qu’avez-vous testé et modifié ?

Chargement du travail enregistré…

Cet exercice s’enregistre séparément de l’exemple guidé. Les cases vous aident à relire votre travail ; elles ne donnent pas une note automatique.

Faire le point sur la leçon

Répondez correctement aux deux questions pour valider ce quiz. Les résultats liés à un compte sont recalculés par le serveur. Ce quiz aide à apprendre ; il ne délivre pas de certification.

1. Pourquoi un élément déplacé avec translate peut-il recouvrir son voisin ?La transformation ne modifie pas la place réservée à la boîte dans le flux normalLa transformation supprime l’élément voisinz-index devient toujours infini

2. Comment adapter au mieux un glissement décoratif lorsque les mouvements doivent être réduits ?Appliquer le changement d’état immédiatement en conservant l’informationMasquer le contrôleRendre le glissement deux fois plus rapide

Chargement du travail enregistré…

Vos choix de confidentialité

Les bases de CSS

Boîtes et mise en page

Couleurs et typographie

Un CSS adaptable et durable

États et mouvements

CSS — Transformations

Distinguer déplacement visuel et mise en page

Les bons réflexes

L’erreur à éviter

Mise en pratique guidée

Faire le point

Utiliser le mouvement pour rendre un changement d’état lisible

Les transformations modifient le dessin, pas la place réservée dans le flux

Une transition relie une valeur de départ à une valeur d’arrivée

Concevoir aussi la variante à mouvements réduits

Votre espace de pratique CSS

Code

Résultat

Comprendre l’erreur

Créer sans recopier l’exemple

Code

Résultat

Les points à vérifier

Faire le point sur la leçon

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris