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
logo

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

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies