Efecto rotación de imagen o capa con html5 y css3

Vamos a ver otro efecto transition combinado con un efecto transform con el que conseguiremos que al pasar el cursor del ratón sobre una capa, imagen o texto, éste rote unos grados previamente establecidos en un tiempo determinado. Vamos a empezar creando una capa que se llame por ejemplo rota_capa, y su código fuente para el css sería:

div.rota_capa {
    float:left;
    width:300px;
    height:100px;
    margin:10px;
    border: 3px solid black;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Como veis, hemos creado una capa básica que permanece flotando a la izquierda, con unas medidas de 300x100 pixeles y unos márgenes exteriores de 20 pixeles frente a cualquier elemento. Además le hemos puesto un borde de 3 pixels solido y negro. Finalmente, le hemos dicho que los eventos que ocurran cuando pase el cursor por encima tengan una duración de proceso de 0.5 segundos. Una vez finalizado esto, vamos a crear una capa :hover en la que vamos a especificar los grados que queremos que la imagen rote:

div.rota_capa:hover {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

Como ya hemos dicho antes, le estamos diciendo en este caso que rote 10 grados en sentido contrario a las agujas del reloj (si queremos que rote en el sentido de las agujas del reloj, basta con poner el número en positivo). Esto ocurrirá en un periodo de tiempo de 0.5 segundos desde que el cursor se sitúa sobre la capa hasta que termina de girar. Incluso podemos combinar alguno de los eventos anteriores para que además de rotar, por ejemplo, aumente de tamaño. En este caso, el :hover quedaría:

div.rota_capa:hover {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    height: 200px;
    width: 600px;
}

Como vemos, ahora además le hemos cambiado el tamaño, y e el momento en que rote, además cambiará de tamaño (doblando su tamaño original). Cuando el cursor del ratón salga del elemento, volverá a su posición inicial con su tamaño inicial. Vamos además a hacer que mientras gira y dobla su tamaño, aumente su borde hasta los 10 pixels y cambie de color a rojo, ¿cómo sería? Pues muy sencillo:

div.rota_capa:hover {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    transform: rotate(-10deg);
    height: 200px;
    width: 600px;
    border:10px solid red;
}

Como veis, con el efecto transition le podemos hacer prácticamente cualquier transformación a la capa o elemento que queramos...
Pronto veremos más utilidades como por ejemplo degradar una capa, redondear los bordes, darle sombra o interna o externa, resplandor... y lo mismo con texto, texto en 3d, con sombras, con efectos...

Si quieres ver un avance de todo esto, además de un ejemplo de el efecto explicado y de otros muchos, entra en
Programación con html5 y css3

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.