Uso básico de la propiedad transform en CSS3

Una nueva propiedad muy interesante en CSS3 es la de “transform”, la cual nos permite la manipulación de nuestros elementos con funciones como rotación y traslación, entre otras propiedades.

Lo que vamos a ver hoy es conocer el uso básico de la propiedad “transform” en CSS3, haciendo un ejemplo de colección de discos que al pasar el mouse rotan para dejar un efecto de torbellino, muy espectacular y hecho con una simple línea de código.

Ejemplo del tutorial
Archivos del tutorial

HTML

Para lograr este efecto lo que necesitamos es una capa que contenga otra capa, y que ésta contenga otra y por último contenga otra capa, puesto que en este tutorial necesitamos cuatro capas, aunque podrían incrementar el número.

Cada capa tiene una clase y un id. La clase es para poder aplicarle estilos generales para cada disco o capa, y el id nos va a servir para definir la imagen que va a tener cada capa, así como la posición de un título para nuestra colección.

CSS

Lo interesante viene en este código. Lo que tenemos para empezar es la definición de la clase portadas, que tiene entre lo más importante la transición de todo y una sombra con un 0.2 de opacidad, porque cuando se aplique a todas las capas se verán una de 0.8, puesto que son 4; si pusieramos una sombra con mayor opacidad el resultado final se vería muy oscuro.

Lo que sigue es la clase para el título. En este caso lo que haremos es darle color, un color de fondo, un borde para que se vea bonito, y una pequeña sombra.

Después siguen los id’s. Cada id tiene una imagen de fondo, a excepción de la caja1, que tiene un margen derecho en caso de que quieriamos agregar más colecciones y no se vean amontonados, y un display de inline-block, para que aparezcan en fila y no en columna. Si se fijan bien la caja1 es la que contiene a las demás capas, por eso es la que tiene estas propiedades. La caja 4 tiene la propiedad de alineamiento  y un line-height para centrar el título al centro horizontal y verticalmente.

Por último tenemos la aplicación de nuestra propiedad transform. Lo que vamos a hacer en este ejemplo sencillo va  a ser rotar las capas 14 grados, y debido a que le pusimos anteriormente la propiedad de transition, se verá animado como cada capa se va rotando.

Lo más interesante de todo esto es que la rotación no altera el flujo de línea del documento, es decir, la rotación actúa como si el elemento fuera flotante, y eso es lo mejor de la propiedad transform, que no se apodera de espacio para los efectos.

Si han hecho bien el tutorial y han entendido el funcionamiento de la propiedad de transform ya deberían de ver el efecto en uso.