Translate, Rotate et Scale
Déplacez les éléments avec translate(), faites-les pivoter avec rotate() et redimensionnez-les avec scale().
Translate, Rotate et Scale est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Propriété de transformation
transform applique des transformations visuelles 2D et 3D aux éléments : déplacement, rotation, mise à l’échelle et inclinaison. Les transformations ont lieu après la mise en page : elles n’affectent pas les éléments voisins.
translate()
Déplace un élément depuis sa position actuelle. Arguments : déplacement selon x et y.
<div class="card demo-active">Card</div>
<div class="wrap"><div class="centered">Centered</div></div>translateX() translateY() translateZ()
Fonctions pour chaque axe, pour plus de clarté :
<div class="slide-in active">Slide panel</div>rotate()
Fait pivoter un élément d’un angle donné. Les valeurs positives entraînent une rotation dans le sens horaire.
<span class="icon demo-active">➤</span>
<span class="spinner">➤</span>scale()
Redimensionne un élément uniformément ou selon chaque axe. Les valeurs inférieures à 1 réduisent la taille ; celles supérieures à 1 l’agrandissent.
<button class="btn demo-active">Button</button>
<div class="thumb demo-active">Thumb</div>scaleX() et scaleY()
Redimensionnez indépendamment selon un axe :
<div class="logo">LOGO</div>Combinaison de transformations
Plusieurs fonctions de transformation sont appliquées dans l’ordre, de droite à gauche. L’ordre influe sur le résultat.
<div class="card demo-active">Card</div>Origine de la transformation
transform-origin définit le point de pivot des rotations et des mises à l’échelle. La valeur par défaut est le centre (50% 50%).
<div class="card demo-active">Card</div>Propriétés de transformation individuelles
Le CSS moderne permet de définir les fonctions de transformation individuelles comme des propriétés distinctes :
<div class="card demo-active">Card</div>Transition avec des transformations
La transformation est l’une des deux propriétés composées par le GPU. Animez-la toujours avec une transition pour obtenir des effets fluides et performants :
<div class="card demo-active">Card</div>translate() par rapport à top/left
Préférez toujours transform: translate() à top/left pour les animations. La transformation est composée par le GPU ; top/left déclenche un recalcul de la mise en page à chaque image.
Vérification rapide
Quelle fonction de transformation reproduit un élément à l’horizontale, comme pour retourner une carte ?
Récapitulatif
transform déplace, fait pivoter et redimensionne les éléments après la mise en page, sans modifier le contenu environnant. Utilisez translate() pour les déplacements, rotate() pour les rotations et scale() pour le redimensionnement. Enchaînez plusieurs fonctions dans une même déclaration. Le CSS moderne prend en charge les propriétés de transformation individuelles. Animez toujours ces propriétés avec des transitions pour bénéficier des performances de la composition par le GPU.
Questions Fréquemment Posées
La leçon « Translate, Rotate et Scale » est-elle gratuite ?
Oui — le texte complet de « Translate, Rotate et Scale » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Translate, Rotate et Scale » ?
Déplacez les éléments avec translate(), faites-les pivoter avec rotate() et redimensionnez-les avec scale(). Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Translate, Rotate et Scale » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Translate, Rotate et Scale
- Transformations par inclinaison et matrice
- Origine et perspective des transformations
- Transformations 3D : rotateX, rotateY, translateZ