<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
      }

      #stage {
        background-color: lightgray;
        margin: 150px auto;
        width: 600px;
        height: 400px;
        perspective: 800px;
      }

      #rotate {
        width: 600px;
        height: 400px;
        transform-style: preserve-3d;
	transform: rotateX(30deg) rotateY(30deg) rotateZ(30deg) translateZ(25px);
      }

      .ring {
        height: 110px;
        width: 600px;
        transform-style: preserve-3d;
      }

      .ring > :nth-child(odd) {
        background-color: #995C7F;
      }

      .ring > :nth-child(even) {
        background-color: #835A99;
      }

      .poster {
        position: absolute;
        left: 250px;
        width: 100px;
        height: 100px;
        opacity: 0.5;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <div id="stage">
      <div id="rotate">
        <div class="ring">
	  <div class="poster" style="transform: rotateY(0deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(30deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(60deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(90deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(120deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(150deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(180deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(210deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(240deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(270deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(300deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(330deg) translateZ(200px);"></div>
	</div>
	<div class="ring">
	  <div class="poster" style="transform: rotateY(0deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(30deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(60deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(90deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(120deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(150deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(180deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(210deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(240deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(270deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(300deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(330deg) translateZ(200px);"></div>
	</div>
	<div class="ring">
	  <div class="poster" style="transform: rotateY(0deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(30deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(60deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(90deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(120deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(150deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(180deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(210deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(240deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(270deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(300deg) translateZ(200px);"></div>
	  <div class="poster" style="transform: rotateY(330deg) translateZ(200px);"></div>
	</div>
      </div>
    </div>
  </body>
</html>
