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);
}
Valoraciones
Sé el primero en valorar