04

3

Rotaciones 3D similares a Metro con CSS3

Los que hayáis probado Windows 8 os habréis dado cuenta que toda la interfaz Modern UI (Metro) hace uso de efectos 3D que son básicamente rotaciones, que se pueden realizar muy fácilmente con CSS3.
En este artículo veremos cómo realizar rotaciones como las que usa la interfaz Metro de Windows 8 y como darle utilidad a esto.

La imagen anterior es de un experimento que realicé, es este mismo blog pero con un diseño Metro con efectos 3D, realmente realiza un giro de 180º para mostrar una imagen que está detrás.
Ahora os mostraré como realizar varios de los efectos de Modern UI con CSS3, a modo de ejemplo, ya que estas funcionalidades de pueden aplicar a cualquier tipo de diseño.

Logotipo de Windows 8

El logotipo de Windows 8 está formado por cuatro bloques rectangulares (anteriormente eran cuadrados) y está ligeramente girado, sobresaliendo más la parte derecha.

Crear este efecto 3D es muy sencillo, simplemente teniendo los cuatro bloques podemos aplicar una rotación en el eje Y y recrearemos este mismo efecto.
En este caso la rotación es más o menos de -12º (es negativa la rotación, de hacerla positivo el lado izquierdo pasaría hacia el frontal).

1. /* Rotación logo Windows 8 */
2. transform: perspective(300px) rotateY(-12deg);

El origen de esta rotación está en el lado derecho, que lo hemos establecido con la propiedad transform-origin.

1. /* Eje de rotación en la derecha */
2. transform-origin: 100% 50%;

Seleccionar elementos

En el inicio de Windows 8 cuando estamos pulsando (con el botón derecho o izquierdo) un bloque se inclina ligeramente, de una forma similar a la del ejemplo anterior.
Un posible uso que le podríamos dar al siguiente ejemplo podría ser el de tumbar un elemento al seleccionarlo (que podrían ser imágenes).

Girar un elemento

Estos han sido unos ejemplos que se asemejan a los que muestra la interfaz de Windows 8, ahora os explicaré como realizar el efecto de flip que he realizado en Xitrus estilo Metro, que tiene la particularidad de que realiza el giro sobre un lateral pero sigue centrado (lo normal sería que al rotar se colocará justo a un lado).
Esto se hace con la función translate de la propiedad transform, con la que podemos cambiar la posición del elemento.

La diferencia está en que el elemento del centro realiza la rotación sin salirse de su posición inicial, a diferencia de los otros dos, por ese motivo es el que utilicé para crear el experimento (Xitrus estilo Metro).

1. /* Primer bloque */
2. transform: perspective(300px) rotateY(-180deg);
3. transform-origin: 50% 50%;
5. /* Segundo bloque */
6. transform: perspective(300px) rotateY(-180deg translationX(100%);
7. transform-origin: 100% 50%;
9. /* Tercer bloque */
10. transform: perspective(300px) rotateY(-180deg);
11. transform-origin: 100% 50%;

Resumen

Esta ha sido una pequeña recopilación de unos cuantos efectos 3D que realiza la interfaz del nuevo Windows 8 y gracias a CSS3 podemos recrear sin apenas esfuerzo y crear interesantes diseños.