title: 3D issue with CSS3 using PhantomJS
body: <p><strong>Info</strong></p>
  
  <p>I am currently working on a native/server project where one important step is to render a HTML/CSS animated 3D cube into a video. I am using <em><a href="http://phantomjs.org/" rel="nofollow">PhantomJS</a></em> and <em>FFmpeg</em> for the video part.</p>
  
  <p>The 3D cube is in a <code>div</code>, which is inside a container, in the HTML code. On the CSS side, the cube gets animated in CSS3 using media queries as seen below.</p>
  
  <p><strong>Question</strong></p>
  
  <p>This 3D cube works fine when looking at it using a web browser, but when it gets rendered into a PNG the whole cube looks flat as a paper. Tearing down the code, I noticed <em>PhantomJS</em> is ignoring the <code>preserve-3d</code>. If you commentate the <code>preserve-3d</code> away, you will get the same result as the PNG´s using <em>PhantomJS</em>.</p>
  
  <p>Also, using <code>translateZ</code>, <code>rotateY</code> and <code>rotateX</code> seems not to be working as intended. Mainly because of the <code>preserve-3d</code> problem.</p>
  
  <p>Any ideas on how I should proceed with this problem? </p>
  
  <p>P.S. I have also tried using <code>-moz-transform</code>, <code>-o-transform</code>, <code>-ms-transform</code> and <code>transform</code> instead of <code>-webkit-transform</code>, did not work.</p>
  
  <hr>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt; 
      &lt;div id="cube" class="animate"&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
          &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>@-webkit-keyframes spinning {
    from  {-webkit-transform: translateX(200px) rotateZ(100deg) rotateY(0deg);   }
    to    {-webkit-transform: translateX(100px) rotateZ(200deg) rotateY(220deg);   }
  }
  
  #container {
    -webkit-perspective           : 1000px;
    -webkit-perspective-origin    : 50% 50%;
  }
  
  .animate {
    -webkit-animation : spinning 5s 1 linear;
    -webkit-transform : translateX(100px) rotateZ(200deg) rotateY(220deg);
  }
  
  #cube {
    position: relative;
    margin: 0 auto;
    height: 200px;
    width: 200px;
  
    -webkit-transition        : -webkit-transform 2s linear;
    -webkit-transform-style   : preserve-3d;
  }
  
  #cube&gt;div {
    position: absolute;
    height: 160px;
    width: 160px;
    padding: 20px;
    opacity: 0.9;
    background-position:center center;
  }
  
  /* =======================================
     ======= Placement of each side ======== 
     ======================================= */
  
  
  #cube div:nth-child(1) {
    -webkit-transform : translateZ(100px);
    background-color  : #09F;
  }
  
  #cube div:nth-child(2) {
    -webkit-transform : rotateY(90deg) translateZ(100px);
    background-color  : #0F9;
  }
  
  #cube div:nth-child(3) {
    -webkit-transform : rotateY(180deg) translateZ(100px);
    background-color  : #99C;
  }
  
  #cube div:nth-child(4) {
    -webkit-transform : rotateY(-90deg) translateZ(100px);
    background-color  : #F6C;
  }
  
  #cube div:nth-child(5) {
    -webkit-transform : rotateX(-90deg) translateZ(100px) rotate(180deg);
    background-color  : #939;
  }
  
  #cube div:nth-child(6)  {
    -webkit-transform : rotateX(90deg) translateZ(100px);
    background-color  : #F63;
  }
  </code></pre>