<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Explaining transform-style</title>
  <style type="text/css" media="screen">
    body {
      font-family: 'Lucida Grande', Verdana, Arial;
      font-size: 12px;
    }
    #container {
      position: relative;
      height: 300px;
      width: 300px;
      margin: 50px 100px;
      border: 2px solid blue;
      -webkit-perspective: 500;
    }

    #parent {
      margin: 10px;
      width: 280px;
      height: 280px;
      background-color: #844BCA;
      opacity: 0.8;
      -webkit-transform-style: preserve-3d;
      -webkit-animation: spin 10s infinite linear;
    }
    
    #container:hover #parent {
      -webkit-transform-style: flat;
    }
    
    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(360deg); }
    }
    
    #parent > div {
      position: absolute;
      top: 40px;
      left: 40px;
      width: 200px;
      height: 200px;
      padding: 10px;
      -webkit-box-sizing: border-box;
      font-family: monospace;
      font-size: 12pt;
    }

    #parent > :first-child {
      background-color: #49DC93;
      -webkit-transform: translateZ(-100px) rotateY(45deg);
    }

    #parent > :last-child {
      background-color: #FF6;
      -webkit-transform: translateZ(50px) rotateX(20deg);
      -webkit-transform-origin: 50% top;
    }

  </style>
  <script type="text/javascript" charset="utf-8">

  </script>
</head>
<body>

  <div id="container">
    <div id="parent">
      <div>-webkit-transform: translateZ(-100px) rotateY(45deg);</div>
      <div>-webkit-transform: translateZ(50px) rotateX(20deg);</div>
    </div>
  </div>

  <h1>Transform Style</h1>
  <p>This example shows the effect of <code>-webkit-transform-style</code>. The blue box has perspective set on it.
    The purple box has 
<pre>
  -webkit-transform-style: preserve-3d;
</pre>
  <p>which allows the yellow and green boxes to live in a shared 3D space, and thus appear to stand away
    from the purple box by virtue of their transforms.
  </p>
  <p>
    However, when you hover, we set the purple box to:
  </p>
<pre>
  -webkit-transform-style: flat;
</pre>
  <p>so its children collapse into it. Their <code>-webkit-transform</code> still applies, but now
    it's just a painting effect, and is not affected by the container's perspective.
  </p>

</body>
</html>