Proyecto ASIR

Las transformaciones en CSS3

Desplazamiento

La función translate permite realizar un desplazamiento, una translación, de una distancia determinada, en función de la posición inicial y del punto de referencia.

	.desplazamiento { 
		-webkit-transform: translate(250px,50px); 
		transform: translate(250px,50px); 
	}
				

Cambio de escala

La función scale permite transformar el tamaño de un elemento según una escala de 0 a 1, en la que 1 es el tamaño inicial.

	.escala { 
		-webkit-transform: scale(.5); 
		-o-transform: scale(.5); 
		transform: scale(.5); 
	}
				

También podemos realizar una escala no proporcional:

	.escala2 { 
		-webkit-transform: scale(.5,1.2); 
		-o-transform: scale(.5,1.2); 
		transform: scale(.5,1.2); 
	}			
				

También podemos realizar una escala no proporci

Rotación

La función rotate permite realizar la rotación de un elemento. La unidad se puede expresar en grados deg o en radianes rad.

	.rotar { 
		-webkit-transform: rotate(23deg); 
		-o-transform: rotate(23deg); 
		transform: rotate(23deg); 
	}
				

Deformación

La función skew permite realizar una deformación del elemento en los dos ejes. La unidad puede expresarse en grados deg o en radianes rad.

	.deformar { 
		-webkit-transform: skew(20deg,-5deg); 
		-o-transform: skew(20deg,-5deg); 
		transform: skew(20deg,-5deg); 
	}			
				

Pueden aplicarse varias transformaciones a la vez:

.transformar { 
	-webkit-transform: scale(.7) rotate(3deg) translateX(5px) 
	skewX(-5deg); 
	-o-transform: scale(.7) rotate(3deg) translateX(5px) skewX(-5deg); 
	transform: scale(.7) rotate(3deg) translateX(5px) skewX(-5deg); 
}