Básicamente translate() te permite mover un elemento en el eje X o Y... ¡O ambos! 👀, básicamente este ejemplo que ya había puesto en una clase anterior, vas de un punto A a un punto B:
!animation
Ahora, ¡la propiedad transform usos muy interesantes! Un uso que a mí me encantó mucho cuando lo conocí es la posibilidad de poder centrar elementos, tanto verticalmente como horizontalmente, por ejemplo, suponiendo que tenemos un elemento padre con position: relative; y un elemento hijo con position: absolute...
¡Podemos centrarlo usando transform y las propiedades top y left! ¿Cómo? Simplemente hay que decirle al elemento hijo que se muevan 50% en su top y su left:
🤔 Pero esto no está centrado... Aquí es donde podemos usar transform ;) Simplemente le decimos que tanto en X como en Y se mueva -50%, es decir, que retroceda el 50% de sí mismo, de esa forma quedará totalmente centrado :D
De esa forma siempre se mantendrá centrado el elemento, esta forma de centrar me encanta cuando trabajamos con elementos posicionados absolutamente ;).
💚
