CSS point de vue ne fonctionne pas

Je suis en train de créer un cube avec les CSS. En fait je pense que c'est déjà là, mais je ne peux pas le voir.
Hésitez pas à modifier le violon.

Je ne comprends pas pourquoi la perspective n'est pas de travail.
Est-ce la meilleure pratique?

Est-il possible de faire tourner le cube dans son ensemble??

Source: 24ways.

HTML:

<section class="container">
      <div id="cube">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
      </div>
    </section>

CSS:

.container {
  margin: 200px auto;
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-perspective: 800px;
 }

 #cube {
  width: 100%;
  height: 100%;
  position: absolute;
 -webkit-transform-style: preserve-3d;
 }

#cube figure {
  width: 198px;
  height: 198px;
  display: block;
  position: absolute;
  border: 1px solid #ddd;
  background-color: rgba(0,0,0,0.2);
}

#cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); }
#cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); }
#cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); }
#cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); }
#cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); }
#cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }    

OriginalL'auteur Maroshii | 2012-02-28