title: CSS3 - 3D Cube- IE transform-style: preserve-3d workaround
body: <p>After looking through IE10's <a href="http://msdn.microsoft.com/en-gb/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property" rel="noreferrer">developer blog</a> I have found that they do not support the preserve-3d setting.</p>
  
  <p>I found this cube originally made by Paul Hayes which is working with touch screens and quite popular.</p>
  
  <p>Altough preserve-3d setting is a known issue, I couldn't achieved suggested work around because it seems there is no transform property in the parent to maually apply to the child elements.
  Here is the link that I simplified so far: <a href="http://jsfiddle.net/cC4Py/1/" rel="noreferrer">http://jsfiddle.net/cC4Py/1/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>.viewport {
  
      perspective: 800px;
      perspective-origin: 50% 200px;
      transform: scale(0.75,0.75);
  
      -webkit-perspective: 800;
      -webkit-perspective-origin: 50% 200px;
      -webkit-transform: scale(0.75,0.75);
  
      -moz-perspective: 800;
      -moz-perspective-origin: 50% 200px;
      -moz-transform: scale(0.75,0.75);
  
  
  }
  
  .cube {
      position: relative;
      margin: 0 auto;
      height: 400px;
      width: 400px;
  
  
      transition: transform 50ms linear;
       transform-style: preserve-3d;
  
      -webkit-transition: -webkit-transform 50ms linear;
      -webkit-transform-style: preserve-3d;
  
  
      -moz-transition: -moz-transform 50ms linear;
      -moz-transform-style: preserve-3d;
  
  }
  
  
  .cube &gt; div {
      position: absolute;
      height: 360px;
      width: 360px;
      padding: 20px;
      background-color: rgba(50, 50, 50, 1);
      font-size: 1em;
      line-height: 1em;
      color: #fff;
      border: 1px solid #555;
      border-radius: 3px;
      transition: -webkit-transform 50ms linear;
  }
  
  .cube &gt; div:first-child  {
  
  transform: rotateX(90deg) translateZ(200px);
  
  
      -webkit-transform: rotateX(90deg) translateZ(200px);
      -moz-transform: rotateX(90deg) translateZ(200px);
  }
  
  .cube &gt; div:nth-child(2) {
  transform:  translateZ(200px);
  
      -webkit-transform: translateZ(200px);
      -moz-transform: translateZ(200px);
  }
  
  .cube &gt; div:nth-child(3) {
  transform:  rotateY(90deg) translateZ(200px);
  
      -webkit-transform: rotateY(90deg) translateZ(200px);
      -moz-transform: rotateY(90deg) translateZ(200px);
      text-align: center;
  }
  
  .cube &gt; div:nth-child(4) {
  transform: rotateY(180deg) translateZ(200px);
  
      -webkit-transform: rotateY(180deg) translateZ(200px);
      -moz-transform: rotateY(180deg) translateZ(200px);
  }
  
  .cube &gt; div:nth-child(5) {
  transform: rotateY(-90deg) translateZ(200px);
  
      -webkit-transform: rotateY(-90deg) translateZ(200px);
      -moz-transform: rotateY(-90deg) translateZ(200px);
  }
  
  .cube &gt; div:nth-child(5) p {
      text-align: center;
      font-size: 2.77em;
      margin: 40px;
      line-height: 60px;
  }
  
  .cube &gt; div:nth-child(6) {
  transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
  
      -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
      -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(200px);
  }
  
  object {
      opacity: 0.9;
  }
  
  object:hover {
      opacity: 1;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body class="experiment"&gt;
  &lt;div class="viewport"&gt;
      &lt;section class="cube" style="transition: 500ms; -webkit-transition: 500ms;"&gt;
          &lt;div&gt;MELABA!&lt;/div&gt;
          &lt;div&gt;
              &lt;h2&gt;3D cube&lt;/h2&gt;
              &lt;time&gt;28th September 2010&lt;/time&gt;
              &lt;p&gt;By Paul Hayes&lt;/p&gt;
              &lt;p&gt;3D cube built using css, webkit-perspective and webkit-transform. Rotation via webkit-transition.&lt;/p&gt;
              &lt;p&gt;Use arrow keys to navigate, or click and hold mouse. On touch screens, use one finger to rotate. Press ESC to reset.&lt;/p&gt;
              &lt;p&gt;&lt;a href="http://www.paulrhayes.com/2010-09/3d-css-cube-ii-touch-gestures-click-and-drag/" target="_top"&gt;Read more »&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;object width="360" height="360"&gt;&lt;param name="movie" value="http://www.youtube.com/v/MY5PkidV1cM?fs=1&amp;amp;hl=en_GB&amp;amp;rel=0"&gt;&lt;param name="allowFullScreen" value="true"&gt;&lt;param name="allowscriptaccess" value="always"&gt;&lt;embed src="http://www.youtube.com/v/MY5PkidV1cM?fs=1&amp;amp;hl=en_GB&amp;amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="360" height="360"&gt;
              &lt;/object&gt;
              &lt;/div&gt;
          &lt;div&gt;
              &lt;h2&gt;&lt;a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top"&gt;Learn how to make a cube&lt;/a&gt;&lt;/h2&gt;
              &lt;time&gt;17th July 2009&lt;/time&gt;
              &lt;p&gt;By Paul Hayes&lt;/p&gt;
              &lt;p&gt;“A 3D cube can be created solely in CSS, with all six faces.”&lt;/p&gt;
              &lt;p&gt;Article: &lt;a href="http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/" target="_top"&gt;Cube explanation&lt;/a&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;p&gt;I design and build websites in Brighton&lt;/p&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;small&gt;Nothing down here.&lt;/small&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://www.paulrhayes.com/experiments/cube-3d/js/experiment.js?13"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I created copies of every property without -webkit- prefix. Am I doing anything wrong? What should I do next?</p>