Girar imágenes con código

Cómo podemos girar imágenes con código

Esta semana veremos como se puede girar imágenes con código, con este artículo completaremos una serie de artículos dedicados a las imágenes y todo lo que podemos hacer con ellas.

En este efecto vamos a utilizar un código CSS muy sencillo, ¿estás preparado?, ¡pues adelante!.

Girar imágenes con código: código que vamos a utilizar

Este artículo va a ser más cortito de lo normal, ya que el código que utilizaremos es tan sencillo que apenas necesita explicación. El código es el siguiente:

¿Qué te parece?
Más sencillo imposible, ¿verdad?. Vamos a explicar lo que hace este código con las menores palabras posibles: en primer lugar creamos una clase llamada .girar-imagen, a continuación hacemos una transformación en el eje X con un valor de -1,. Esto hará que la imagen se gire 180 grados sobre el eje X.

¿Dónde colocamos este código?

Ya sabrás que, al ser un código tan sencillo, podemos ponerlo directamente en el personalizador de WordPress. Para ello vamos a Apariencia, Personalizar, CSS adicional.

Último paso: aplicar esta clase a la imagen que deseamos girar

Así es, el último paso es aplicarle esta clase que hemos creado, a las imágenes que queremos girar. Esto es muy sencillo de hacer, tan solo tenemos que añadir la clase girar-imagen dentro de la etiqueta <img> de la propia imagen.

Por ejemplo:

Resultado de este efecto