title: CSS perspective not working
body: <p>I'm trying to create a cube with CSS. I actually think it's already there but I can't see it.
  Feel free to <a href="http://jsfiddle.net/ca5YX/" rel="nofollow">edit the fiddle</a>.</p>
  
  <p>I don't understand why the perspective is not working.
  Is this best practice?</p>
  
  <p>Is it possible to rotate the cube as a whole??</p>
  
  <p>Source: <a href="http://24ways.org/2010/intro-to-css-3d-transforms" rel="nofollow">24ways</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="container"&gt;
        &lt;div id="cube"&gt;
          &lt;figure class="front"&gt;1&lt;/figure&gt;
          &lt;figure class="back"&gt;2&lt;/figure&gt;
          &lt;figure class="right"&gt;3&lt;/figure&gt;
          &lt;figure class="left"&gt;4&lt;/figure&gt;
          &lt;figure class="top"&gt;5&lt;/figure&gt;
          &lt;figure class="bottom"&gt;6&lt;/figure&gt;
        &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.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); }    
  </code></pre>