Eu gostaria de reproduzir este jsfiddle I que preparado com base emeste incrível tutorial (por favor, verifiquea demo). Mas eu não quero a funcionalidade das teclas, apenas em foco.

http://jsfiddle.net/b5rmW/5/

Mas isso só usa duas faces (frente e verso).

Eu tentei assim:

    #cube {
      position: relative;
      margin: 100px auto 0;
      height: 300px;
      width: 300px;
      -webkit-transition: -webkit-transform .5s linear;
      -webkit-transform-style: preserve-3d;

      -moz-transition: -moz-transform .5s linear;
      -moz-transform-style: preserve-3d;
    }

    .face {
      position: absolute;
      height: 300px;
      width: 300px;
      padding: 0px;
      background-color: rgba(50, 50, 50, 1);
      font-size: 27px;
      line-height: 1em;
      color: #fff;
      border: 1px solid #555;
      border-radius: 3px;
    }

    #cube .one  {
      -webkit-transform: rotateX(90deg) translateZ(150px);
      -moz-transform: rotateX(90deg) translateZ(150px);
      background:red;
    }

    #cube .two {
      -webkit-transform: translateZ(150px);
      -moz-transform: translateZ(150px);
    background:gold;
    }

    #cube .three {
      -webkit-transform: rotateY(90deg) translateZ(150px);
      -moz-transform: rotateY(90deg) translateZ(150px);
    background:blue;
    }

    #cube .four {
      -webkit-transform: rotateY(180deg) translateZ(150px);
      -moz-transform: rotateY(180deg) translateZ(150px);
    background:green;
    }

    #cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(150px);
      -moz-transform: rotateY(-90deg) translateZ(150px);
    background:orange;
    }

    #cube .six {
      -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
      -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
    }
#cube:hover{
   transform:rotateY(90deg); 

}

http://jsfiddle.net/5XTeU/1/

Mas o efeito parece não ser o mesmo.

O que você acha que é o mínimo necessário para conseguir esse primeiro violino ??

Obrigado.