Rotar como La interfaz metro de windows8 con CSS3

La interfaz que utiliza Windows 8 es la Modern UI (Metro) que hace uso de efectos 3D. Podemos copiar esos efectos para agregarlos a nuestros diseños web y que se vean chulos utilizando CSS3.

Vamos a rotar 3 cajas. Una rotará desde el centro, la segunda rotará desde el lateral y se desplazará y la tercera rotará desde el lateral.

Código HTML

    
  
        

   

    

Rota desde el centro
 

    

Rota desde el lateral y se desplaza
 

    

Rota desde el lateral
 

   

Código CSS

.cobertor {
        display: table;
        background: #112E86;
        text-align: center;
        padding: 15px;
        margin: 20px auto;
        box-shadow: inset 0px 0px 20px black;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
      }
      .cobertor div {
        display: inline-block;
        background: #cccccc;
        padding: 15px;
        margin: 15px;
        /*color: #111111;*/
        text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
        box-shadow: 0px 0px 20px black, inset 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 2px 0px rgba(255, 255, 255, 0.1);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
      }
      .cobertor div,
      .cobertor div > div {
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        -webkit-transform-style: preserve- 3 d;
        -moz-transform-style: preserve- 3 d;
        transform-style: preserve- 3 d;
        -webkit-transform: perspective(600px);
        -moz-transform: perspective(600px);
        transform: perspective(600px);
      }
      
      .cobertor .rotar span {
        display: inline-block;
      }
      
      .cobertor .rotar div {
        -webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        transition: all 1s ease;
        margin: 10px;
        padding-top: 40px;
        height: 80px;
        width: 120px;
                          background: #2E9AFE;
        -webkit-transform: perspective(300px);
        -moz-transform: perspective(300px);
        transform: perspective(300px);
        -webkit-transform-origin: 100% 50%;
        -moz-transform-origin: 100% 50%;
        transform-origin: 100% 50%;
      }
      .cobertor .rotar span:hover .rotar-1 {
        -webkit-transform: perspective(300px) rotateY(-180deg);
        -moz-transform: perspective(300px) rotateY(-180deg);
        transform: perspective(300px) rotateY(-180deg);
      }
      .cobertor .rotar span .rotar-2 {
        -webkit-transform-origin: 50% 50%;
        -moz-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
      }
      .cobertor .rotar span:hover .rotar-2 {
        -webkit-transform: perspective(300px) rotateY(-180deg);
        -moz-transform: perspective(300px) rotateY(-180deg);
        transform: perspective(300px) rotateY(-180deg);
      }
      .cobertor .rotar span:hover .rotar-3 {
        -webkit-transform: perspective(300px) rotateY(-180deg) translateX(100%);
        -moz-transform: perspective(300px) rotateY(-180deg) translateX(100%);
        transform: perspective(300px) rotateY(-180deg) translateX(100%);
      }

Este artículo fue basado en el post de mi querido amigo Pedro Gutierrez. Gracias!

CSS3 - @font-face

Puede que desde mi archivo hoja de estilo, ponga cierta fuente tipográfica a mis títulos y desde mi máquina se vea genial. Pero, y desde otra máquina? Puede que no se vea tan genial jeje. Porque si esa fuente no está instalada en el sistema cliente, éste no lo verá y lo reemplazará por una que sí tenga instalada.

CSS3 tiene una propiedad especial para que los diseñadores web puedan utilizar cualquier fuente indpendientemente de si está o no está instalada en la máquina cliente.

@font-face se llama la propiedad y permite utilizar una fuente referenciando su ubicación la cual puede estar subida a nuestro servidor web o a un servidor externo.

La fuente tipográfica puede estar en distintos formatos:

Embedded OpenType (EOT)

True Type (TTF)

Open Type (OTF)

Web Open Font (WOFF)

No todos los navegadores soportan el mismo formato, por tanto, podés tener una misma fuente con diferentes formatos y describirlos en tu hoja de estilo. Checa más abajo cómo listo los diferentes formatos.

Cómo usar la directiva @font-face

@font-face {
 font-family: "AltamonteNF";
 font-style: normal;
 font-weight: normal;
 src: url("/fonts/AltamonteNF.ttf") format("truetype"),
 url("/fonts/AltamonteNF.woff") format("woff"),
 url("/fonts/AltamonteNF.eot") format("embedded-opentype");
}

body {
        background: #333333;
        font-family: AltamonteNF;
        font-size: 24pt;
        color: #ffffff;
}

Se vería así:

Podés descargarte gratuitamente fuentes tipográficas compatibles con @font-face en http://www.creamundo.com/ y http://www.fontsquirrel.com