Girar imágenes con código

Tiempo estimado de lectura: 2 minutos

 

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:

.girar-imagen {
transform: scaleX(-1);
}

¿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:

<img class=»girar-imagen» src=»https://www.josegonzalezbueno.com/wp-content/uploads/2020/08/imagen-rectangular.jpg» />

Resultado de este efecto

Girar imágenes con código: Imagen original
Girar imágenes con código: Imagen original

 

Girar imágenes con código: Imagen girada
Girar imágenes con código: Imagen girada


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja una respuesta

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros, salvo por imperativo legal.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *