Logo Microsoft CSS3 con hover a logo Windows 8

Utilizando y dominando las propiedades del CSS3 se pueden realizar tambien logotipos sin utilizar ningun tipo de imagen. Para que veais un ejemplo de lo que os estoy hablando, he diseñado el logo de Microsoft, que al pasar el cursor por encima, este se transforma transicionalmente en el de Windows 8.

MicrosoftWindows 8

Este es el codigo completo que he utilizado para realizar los logotipos:

<div id="logo"><div class="simbolo"></div>
<div class="logotipo"><span class="s1">Microsoft</span>
<span class="s2">Windows 8</span>
</div></div>

<style>
@import url
(http://fonts.googleapis.com/css?family=Open+Sans);

#logo {
  width: 620px;
 height: 150px;
 overflow: hidden;
 padding-top: 20px;
 position: relative;
 margin: 50px auto;cursor:pointer;
 perspective: 400px;
 perspective-origin: -20% 50%;
}

.simbolo {
 width: 62px;
 height: 62px;
 background: #f25222;
 display: inline-block;

 box-shadow: 68px 0 #80bb01,
       0 68px #01a4ef,
       68px 68px #ffba00;

 transition: all .5s ease;
}

#logo:hover .simbolo {

 transform: rotateY(-50deg);
 background: #00adef;
 box-shadow: 68px 0 #00adef,
       0 68px #00adef,
       68px 68px #00adef;
}

.logotipo {
 width: 540px;
 display: inline-block;
 position: absolute;
 top: 0;
 right: 0;
}

.logotipo span {
 position: absolute;
 right: 0;
 top: 0;
 font: 600 110px "Segoe UI", "Open Sans", arial, sans-serif;
 color: #727272;
 letter-spacing: -3px;
 transition: all 0.5s ease;
}

#logo .s2 {
 font-size: 95px;
 line-height: 150px;
 color: #00adef;
 top: -120px;
 opacity: 0;
}

#logo:hover .s1 {top: 150px; opacity: 0}
#logo:hover .s2 {top: 0; opacity: 1;}
  </style>