En este artículo voy a explicar cómo voltear una imagen con CSS sin tener que utilizar un editor de imágenes. Esta técnica también sirve para cualquier tipo de foto o elemento HTML utilizando únicamente CSS.
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 o invertir 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 o invertir una imagen, foto o cualquier elemento HTML, tanto horizontal como verticalmente, como ambos a la vez.
Observa las siguientes clases CSS para voltear o invertir elementos HTML:
.voltearX {
transform: scaleX(-1);
}
.voltearY {
transform: scaleY(-1);
}
.voltearXY {
transform: scaleX(-1) scaleY(-1);
}Con estas clases CSS conseguimos voltear o invertir una imagen o cualquier elemento HTML, tanto horizontalmente como verticalmente, como ambos 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 alguno se pregunte porqué no aplicamos ambas clases (voltearX, 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, 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 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, las siguientes transformaciones simplemente se ignoran. Así que ya sabéis:
Para hacer varias transformaciones a un elemento HTML hay que definirlas todas en la misma propiedad transform.
De esta forma, el navegador calcula todas las tranformaciones del elemento HTML y aplica el resultado final de la transformación una sola vez.
Espero que os sea de utilidad!