| <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> |
| </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> |
