Short video: Transformations (scale, rotate, translate, perspective, skew...)

13 Dec 2022 · 2 min

Watch on YouTube

1:39

In this short French tutorial, the speaker demonstrates how to move an element using CSS transform translate when the user hovers over it. He explains that translate takes two parameters (X and Y offsets) and shows a concrete example (translate(100px, 50px)) that moves the element 100 px to the right and 50 px down relative to its original position. To make the motion smooth, he adds a 0.5 s transition for both the hover state and the default state, allowing the element to animate back when the cursor leaves. He then contrasts translate with the shorthand alternatives translateX and translateY, noting that the latter accept a single value and affect only one axis, but that using translate with both values is more concise than writing two separate rules.

Chapters

Nous allons maintenant essayer de transformer la position de l'objet. L'objet, il est là. Je voudrais quand je le survole qu'il se déplace, peu importe l'orientation que vous souhaitez. Alors là, on va mettre transform: translate. Translate est une valeur CSS qui permet d'accepter des paramètres. C'est un petit peu comme une fonction. Il va accepter par défaut deux paramètres, à savoir le paramètre que l'on va appliquer sur l'axe des X et le paramètre que l'on va appliquer sur l'axe des Y. Imaginez par exemple que j'ai mis ici 100px, 50px. Alors l'objet maintenant quand je vais le survoler il va se déplacer d'une manière relative, ça veut dire par rapport à sa position initiale, de 100 pixels et 50 pixels vers le bas. Quand j'exécute, alors on voit bien que l'objet se déplace de cette manière. Bon, pour mieux voir l'effet on va ajouter une transition. Alors all, Par exemple, 0,5 secondes. On va faire pour les deux, pour l'état initial aussi, pour voir le chemin inverse. Quand je fais ça, donc voilà, maintenant ça c'est le déplacement. Il se déplace de 100 pixels vers la droite et 50 pixels vers le bas. Si par exemple vous voulez appliquer la translation uniquement par rapport à x ou bien par rapport à y, alors on peut utiliser translateX et on conserve une seule valeur. Dans ce cas, la translation, ou bien le déplacement, sera établi par rapport à l'axe des X. Même chose par rapport à l'axe des Y. Mais pour raccourcir la syntaxe, il est préférable de mettre juste translate et mettre les 2 valeurs que vous souhaitez. Ça veut dire déclarer une seule ligne au lieu de 2 lignes.