Transformaciones en CSS3

Otra de las propiedades que más me fascina de CSS3 es transform. Con ella podemos realizar cambios en elementos de nuestra Web antes nunca soñados, como transformaciones en dos o tres dimensiones. Al igual que transition, todavía no todos los navegadores se han podido adaptar al estándar, así que tendremos que usar varias instrucciones para asegurarnos de que va a funcionar en todos.

Nomenclatura

Transform es una propiedad que parece un contenedor de funciones para modificar el aspecto de los elementos. Podemos utilizar muchas de ellas, aunque en este ejemplo solo vamos a rotar en 16 grados una capa div:

 

Comportamientos

Cómo podemos ver, tenemos que usar tres instrucciones porque todavía Chrome, Safari, Opera e Internet Explorer no se adaptan al estándar. En este enlace vamos a ver todo lo que se puede hacer con la función rotate. No voy a listar todas, así que podéis ir al siguiente enlace para ver las disponibles.

Básicamente podemos:

  • matrix → hacer una transformación en 2D o 3D.
  • translate → mover elementos.
  • scale → cambiar el tamaño de los elementos.
  • rotate → rotar elementos.
  • skew → sesgar elementos.

Esta propiedad CSS3 todavía no ha llegado a su completo desarrollo y promete darnos muchas más alegrías en los próximos años con la implementación de nuevos comportamientos, principalmente en comportamientos 3D.

Combinar con transition

Una buena noticia es que se puede combinar con la propiedad transition. En el siguiente ejemplo vemos cómo:

 

Podemos observar cómo en la capa le decimos que defina una transición basada en transform, y cuando definimos el evento hover (es decir, poner el ratón encima del elemento) se dispara una rotación de 180 grados. ¡Brutal!

Experto en la Gestión de Proyectos Web basados en Drupal con más de 8 años de experiencia. Desarrollo Full Stack (Front-end, Back-end, Site-Builder).

No Replies to "Transformaciones en CSS3"