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!