Rotar imágenes con CSS

Queremos mostraros como conseguir un curioso efecto con CSS. Se trata de hacer rotar imágenes, concretamente provocar la rotación de 180 grados de una imagen al situar el cursor sobre ella.

Este efecto que hace unos años nos hubiera costado muchas líneas de código Javascript con las correspondientes librerías, hoy en dia con unas simples líneas de CSS tenemos mas que suficiente.

Para empezar vamos a crear una sencilla página HTML. En dicha página ubicaremos una imagen que será nuestra protagonista.

El código HTML que utilizamos es el siguiente:

<div id="contenedor">
 <div id="contenedor-imagen">
 <img src="imagen.jpg">
 </div>
 </div>

El siguiente paso será posicionar la caja contenedora:

#contenedor{
 width: 280px;
 margin: 0 auto;
 padding-top:150px;
}

A continuación añadimos un pequeño reborde para remarcar la imagen y añadimos el efecto de transición para que la imagen nos rote suavemente (añadimos la compatibilidad para los diferentes navegadores):

#contenedor-imagen img {
 border: 5px solid #eee;
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
}

Finalmente añadimos la propiedad “hover“, para que al situarnos encima de la imagen, ésta realice un giro hacia la izquierda de 90 grados:

#contenedor-imagen img:hover {
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 transform: rotate(-90deg);
}

Una vez situamos el cursor sobre la imagen, obtenemos un resultado como el siguiente:

Rotar imágenes con CSS

Os invitamos a experimentar con el código cambiando tanto los grados de rotación como el efecto de transición.

Facebooktwittergoogle_plus