Transforms – CSS3

Hacer modificaciones de elementos en la web simplemente por estilos es algo que no podíamos hacer en anteriores versiones de CSS así como por las anteriores versiones de los navegadores, pero ahora que no lo permiten se nos abre un mundo de posibilidades muy divertidas, podemos transformar una capa de texto o con fondo en un elemento divertido, ágil y dinámico.

CSS3 Transform

Con las transaformaciones (transform), conseguimos cambiar la forma del objeto, el tamaño y hasta su posición. Pueden ser de dos tipos:

  • 2D: translate(x-px,y-px), rotate(deg), scale(width, heigth), skew(x-deg, y-deg), y el completo llamado matrix ().
  • 3D: rotateX(deg),rotateY(deg),rorateZ(deg), consigues que ele lemento gire sobre su propio eje.
   -ms-transform: translate(15px,150px); /* IE 9 */     -webkit-transform: translate(15px,150px); /* Safari */     transform: translate(15px,150px);

     -ms-transform: rotate(20deg); /* IE 9 */     -webkit-transform: rotate(20deg); /* Safari */     transform: rotate(20deg);

     -ms-transform: scale(2,3); /* IE 9 */     -webkit-transform: scale(2,3); /* Safari */     transform: scale(2,3);

-ms-transform: skew(20deg, 10deg); /* IE 9 */ -webkit-transform: skew(20deg, 10deg); /* Safari */ transform: skew(20deg, 10deg);

     -webkit-transform: rotateZ(90deg); /* Safari */     transform: rotateZ(90deg);

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s