CSS perspective not working

Question

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 edit the fiddle.

I don't understand why the perspective is not working. Is this best practice?

Is it possible to rotate the cube as a whole??

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); }    

Answer 1

The problem could be that the hardware acceleration was not supported on your PC and it was on your mac... css3d transformations such as rotateX and rotateY require hardware accelerations.

in chrome go to your address bar and enter

chrome://gpu

you will see

3D CSS: Unavailable. Hardware acceleration disabled.

if this is the case then 3d cube is not visible.