Rotación de elementos con la propiedad transform – css

2 de /marzo03 de /2014
1m 40s
css
0 comentarios
1759

 

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

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies