<html>
<head>
  <style type="text/css" media="screen">
    .container {
      position: relative;
      height: 100px;
      width: 500px;
      margin: 50px 100px;
      border: 1px solid blue;
      -webkit-perspective: 10;
    }
    .parent {
      -webkit-transform-style: preserve-3d;
      transform:translateY(0.1%);
    }
    #div1
    {
      height:500px;
      background-color:green;
      -webkit-transform-origin: center top;
      transform:rotate3d(1,0,0,-45deg);
    }
    #div2
    {
      height:500px;
      background-color:green;
      -webkit-transform-origin: center top;
      transform:rotate3d(1,0,0,-150deg);
    }
    #div3
    {
      height:500px;
      background-color:green;
      -webkit-transform-origin: center top;
      transform:rotate3d(1,0,0,-167deg);
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    if (window.testRunner)
      testRunner.dumpAsTextWithPixelResults();
  </script>
</head>
<body style="overflow:hidden">
  <div class="container">
    <div class="parent">
      <div id="div1"></div>
    </div>
  </div>
  <div class="container">
    <div class="parent">
      <div id="div2"></div>
    </div>
  </div>
  <div class="container">
    <div class="parent">
      <div id="div3"></div>
    </div>
  </div>
</body>
</html>