Rotación de elementos con la propiedad transform – css

CSS3 aporta una gran variedad de nuevas funcionalidades, una de ellas es la propiedad «transform», que nos permite generar efectos de animación sin la necesidad de usar JavaScript, esta propiedad nos permite rotar elementos, escalarlos y moverlos entre otros nuevos efectos.

Esta propiedad no es compatible con IE7 e IE8, IE9 soporta algunos valores con la propiedad -ms-transform, para Opera, Chrome y Safari debemos hacer uso del prefijo -webkit- con la propiedad -webkit-transform.

Por ejemplo, si queremos que un elemento tenga un efecto torcido, lo podemos hacer con el siguiente código CSS

transform:rotate(6deg);
-ms-transform:rotate(6deg);
-webkit-transform:rotate(6deg)

Este es el efecto

Animación con la propiedad transition y la propiedad transform

Combinando las propiedades transition y transform podemos hacer que este efecto se ejecute en un :hover, creando el efecto de animación al pasar el mouse por la imagen, en el siguiente ejemplo he creado un código al que le he asignado un valor rotate(360deg) a la propiedad transform para que genere un giro completo de 360 grados, con la propiedad transition, que también es nueva en CSS3 le vamos a asignar a la imagen una transición de tiempo que será el tiempo que tarde la transición en efectuarse.

El código para el ejemplo anterior es el siguiente:

ELEMENTO {
	transition: 0.70s;
	-webkit-transition: 0.70s;
	-moz-transition: 0.70s;
}
ELEMENTO:hover {
	transition: 0.70s;
	-webkit-transition: 0.70s;
	-moz-transition: 0.70s;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}