17

1

Rota elementos en 3D con CSS3

El objetivo de HTML5 y CSS3 es conseguir un conjunto de lenguajes que se ejecuten de igual forma en todas las plataformas y que tenga igual o más potencia que cualquier otro lenguaje, para lograrlo están creando multitud de novedades, en el apartado de diseño (CSS3) han añadido multitud de cosas, como transform, que nos permite crear transformaciones complejas en 2D y 3D.
En este artículo os hablaré sobre como crear transformaciones 3D, exactamente sobre las rotaciones en los distintos ejes (X, Y y Z).

El uso es muy simple, solo tenemos que usar la propiedad transform (al igual que si rotásemos el elemento sin 3D o le cambiásemos la escala) y en su interior añadir una de las funciones anteriores (rotateX, rotateY y rotateZ) especificando los grados que tendrá la rotación, en grados representados con deg.
Recientemente he creado un experimento que se basa en mi blog personal (Xitrus) pero con un estilo Metro y hace uso de estos efectos 3D, podéis verlo para comprobar los usos que se le puede dar a esto.
Nota: probablemente sea necesario poner los prefijos propios de cada navegador en la propiedad transform.

1. transform: rotateX(40deg);
2. transform: rotateY(40deg);
3. transform: rotateZ(40deg);

Poner en marcha

Su uso es muy simple, como he comentado antes podemos usar las tres funciones de transformación disponibles y combinarlas entre ellas para conseguir la rotación deseada.

1. /* Primero cuadro */
2. transform: rotateX(40deg) rotateY(10deg);
3. /* Segundo cuadro */
4. transform: rotateX(40deg) rotateZ(10deg);

Perspectiva

Toda figura tridimensional la vemos desde una perspectiva, que viene dada por la distancia a la que estamos de esa figura, al igual pasa con CSS3, podemos establecer a la distancia a la que nos encontramos de la figura con la función perspective (añadiéndola en transform).
Si nos encontramos cerca de una figura al rotarla la veremos más grande, y si está más lejos apenas notaremos que ha rotado.

1. /* Primero cuadro */
2. transform: perspective(100deg) rotateX(40deg);
3. /* Segundo cuadro */
4. transform: perspective(500deg) rotateX(40deg);

Cara oculta

Los elementos que son sometidos a rotaciones 3D pueden dar la vuelta completa, mostrando el contenido del elemento por su cara trasera, lo que puede ser un problema en ocasiones, en el caso de que no queramos que se muestre esa parte, por lo que podemos usar la propiedad backface-visibility.

1. /* Toma el parámetro visible/hidden */
2. backface-visibility: hidden;