title: CSS3 translateZ doesn't work for chrome?
body: <p>Following simple POC code's translateZ works on Firefox, but it doesn't work on Chrome. The translateX, translateY part works on both browsers. What is wrong with the code? Thanks.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="reset.css" /&gt;
      &lt;style type="text/css"&gt;
          @-webkit-keyframes test1KeyFrames{
              from{
                  -webkit-transform: translateZ(0px) translateY(0px) translateX(0px);
              }
              to{
                  -webkit-transform: translateZ(-1000px) translateY(100px) translateX(100px);
              }
          }
  
          @-moz-keyframes mozTest1KeyFrames{
              from{
                  -moz-transform: translateZ(0px) translateY(0px) translateX(0px);
              }
              to{
                  -moz-transform: translateZ(-1000px) translateY(100px) translateX(100px);
              }
          }
  
          .test1{
               -webkit-transform-origin: 50% 50%;
               -webkit-transform-style:preserve-3d;
               -webkit-animation-name: test1KeyFrames;    
               -webkit-animation-duration: 5s;
               -webkit-animation-direction: normal;
               -webkit-animation-timing-function: ease-out; /*cubic-bezier(0.16,0.74,0.22,-0.15);*/
               -webkit-backface-visibility: visible;
          }
  
          .mozTest1{
               -moz-transform-origin: 50% 50%;
               -moz-transform-style:preserve-3d;
               -moz-animation-name: mozTest1KeyFrames;    
               -moz-animation-duration: 5s;
               -moz-animation-direction: normal;
               -moz-animation-timing-function: ease-out; /*cubic-bezier(0.16,0.74,0.22,-0.15);*/
               -moz-backface-visibility: visible;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div style="border:1px solid red; -webkit-perspective: 100px; -webkit-perspective-origin:240px 140px; -webkit-transform-style:preserve-3d; -moz-perspective: 100px; -moz-perspective-origin:240px 140px; -moz-transform-style:preserve-3d;" &gt;
          &lt;div id="slider1" class="mozTest1 test1" style="border:2px solid blue; width:480px; height:280px; background:url(img3.jpg)"&gt;                
          &lt;/div&gt;
  
          &lt;image src="img1.jpg" class="test1 mozTest1"/&gt;
  
          &lt;p class="test1 mozTest1"&gt;Hello world&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>