En este artículo voy a explicar cómo voltear, girar o invertir una imagen, o cualquier otro elemento HTML, solo con CSS y sin necesidad de utilizar un editor de imágenes. Se trata de una técnica estándar de CSS que se puede aplicar a cualquier tipo de imagen o elemento HTML, utilizando únicamente CSS.
Muchos de vosotros ya conocéis la propiedad transform y las múltiples transformaciones que se pueden aplicar a un elemento HTML: translate, scale, rotate, etc. Quizás algunos de vosotros ya habéis utilizado la propiedad rotate de CSS para voltear, girar o invertir una imagen verticalmente, dándole un giro de 180 grados… pero esta no es la mejor solución.
Voltear una imagen con CSS
Hay un truco muy sencillo y eficaz que nos permite voltear, girar o invertir una imagen con CSS, o cualquier otro elemento HTML, tanto horizontal como verticalmente, o incluso en ambas direcciones a la vez.
Observa las siguientes clases CSS para voltear, girar o invertir cualquier tipo de elemento HTML:
.voltearX {
transform: scaleX(-1);
}
.voltearY {
transform: scaleY(-1);
}
.voltearXY {
transform: scaleX(-1) scaleY(-1);
}Con estas clases CSS conseguimos voltear, girar o invertir una imagen o cualquier otro elemento HTML, tanto horizontal como verticalmente, o en ambas direcciones a la vez.
Y sí, cuando hablo de cualquier elemento HTML, ¡me refiero a TODO su contenido! Si aplicamos la clase voltearY al <body> de nuestra web, ¡veríamos la página al revés!
Es posible que alguien se pregunte por qué no aplicamos ambas clases (voltearX, voltearY) al mismo elemento en lugar de crear la clase extra voltearXY. La respuesta es que no funciona.
La razón por la que debemos aplicar ambas transformaciones en una única propiedad transform, o incluso más transformaciones si lo necesitamos, está en el siguiente código:
transform: scaleX(-1) scaleY(-1) translate(20px, 20px) etc.La propiedad transform permite modificar el espacio de coordenadas visuales de un elemento HTML, pero este cálculo se realiza una sola vez.
Si aplicamos la propiedad transform más de una vez al mismo elemento HTML, las transformaciones adicionales no se calculan ni se aplican. Al haberse realizado el cálculo la primera vez, las siguientes transformaciones simplemente se ignoran. Así que ya sabéis:
Para realizar varias transformaciones en un elemento HTML, deben definirse todas en la misma propiedad transform. De esta manera, el navegador calcula todas las transformaciones del elemento HTML y aplica el resultado final una sola vez. Así que, a partir de ahora, ya sabéis: para voltear, girar o invertir una imagen o elemento HTML, solo debéis aplicarle estas clases CSS.
¡ Espero que este artículo sea de vuestro interés !