Hoy voy a enseñar un pequeño truco para voltear una imagen o elemento HTML con nuestra hoja de estilos CSS y evitar tener que editarla.
Muchos de vosotros ya conocéis la propiedad transform y las múltiples aplicaciones que se pueden aplicar a un elemento HTML: tranlate, scale, rotate, etc.
Quizás alguno de vosotros ya ha utilizado la propiedad rotate para voltear una imagen verticalmente dándole un giro de 180 grados … Pero no es la mejor solución.
Hay un truquillo muy sencillo y eficaz que nos permite voltear cualquier elemento HTML tanto horizontal como verticalmente, como ambos a la vez:
.voltearX {
transform: scaleX(-1);
}
.voltearY {
transform: scaleY(-1);
}
.voltearXY {
transform: scaleX(-1) scaleY(-1);
}Con estas clases CSS conseguimos voltear una imagen o todo el contenido de un elemento HTML, tanto horizontalmente como verticalmente, como ambos a la vez.
Y sí, cuando hablo de todo el contenido me refiero a TODO el contenido!! Si aplicamos la clase .voltearY al <body> de nuestra web veríamos la página al revés!!
Es posible que alguno se pregunte porqué no aplicamos ambas clases (voltearX y voltearY) al mismo elemento, en vez de crear la clase extra voltearXY. La respuesta es porque no funciona.
La razón por la que debemos aplicar las dos tranformaciones en una única propiedad transform, o incluso más tranformaciones si lo necesitamos, es el siguiente:
transform: scaleX(-1) scaleY(-1) translate(20px, 20px) etc.La propiedad transform permite modificar el espacio de coordenadas visuales de un elemento HTML, pero esto se calcula una sola vez
Si aplicamos más veces la propiedad transform al mismo elemento HTML ya no se calculan ni se aplican las transformaciones. Al haberse calculado la primera vez, la siguientes transformaciones simplemente se ignoran. Así que ya sabéis:
Para hacer varias transformaciones a un elemento HTML hay que es definirlas todas en la misma propiedad transform
De esta forma, el navegador calcula todas las tranformaciones y aplica el resultado final de la transformación una sola vez.
Espero que os sea de utilidad!