.container
  -(1..9).each do |i|
    .el{:style => "transform: rotateY(#{(i-1)*40}deg);"}= i
  .light
  .light_ray
.controls
  %button.prev ←
  %button.next →
View Compiled
body {
  background-color: #222;
  overflow-x: hidden;
  font-family: Arial, sans-serif;
}

.container {
  position: relative;
  margin: 150px auto 0;
  width: 220px;
  height: 150px;
  transform-style: preserve-3d;
  perspective-origin: 50% -50%;
  perspective: 900px;
}

.light {
  position: absolute;
  left: -100px;
  top: -135px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 200px rgba(255, 255, 255, 0.7);
  transform: translate3d(0, 75px, -400px) rotateX(90deg)
}

.light_ray {
  position: absolute;
  left: -100px;
  bottom: 0;
  border-width: 0 210px 800px;
  border-style: solid;
  border-color: transparent transparent rgba(255, 255, 255, 0.04);
  transform: translateZ(-400px);
}

.el {
  position: absolute;
  width: 220px;
  height: 150px;
  color: #fff;
  text-align: center;
  transform-origin: 50% 50% -400px;
  transition: transform 0.3s ease-in;
  font-size: 130px;
}

.el:nth-child(1) {
  background-color: rgba(255, 0, 0, 0.7);
}

.el:nth-child(2) {
  background-color: rgba(150, 0, 220, 0.7);
}

.el:nth-child(3) {
  background-color: rgba(0, 255, 255, 0.7);
}

.el:nth-child(4) {
  background-color: rgba(0, 255, 0, 0.7);
}

.el:nth-child(5) {
    background-color: rgba(200, 100, 0, 0.7);
}

.el:nth-child(6) {
  background-color: rgba(0, 0, 255, 0.7);
}

.el:nth-child(7) {
  background-color: rgba(255, 0, 255, 0.7);
}

.el:nth-child(8) {
  background-color: rgba(0, 100, 0, 0.7);
}

.el:nth-child(9) {
  background-color: rgba(255, 255, 0, 0.7);
}

.controls {
  margin-top: 50px;
  text-align: center;
  font-size: 30px;
}

.controls button {
  padding: 0 20px;
}
(function() {
  function rotate(e) {
    elements.each(function(i) {
      var elem = elements.eq(i),
          style = elem.attr("style"),
          value = regEx.exec(style)[0] - 0;
      
      value = e.data.prev ? value + 40 : value - 40;
      style = style.replace(regEx, value);
      elem.attr("style", style);
    });
  }
  
  var elements = $(".el"),
      prev = $(".prev"),
      next = $(".next"),
      regEx = /(-?\d+)(?=deg)/;
  
  prev.click({prev: true}, rotate);
  next.click({prev: false}, rotate);

  $(document).keydown(function(e) {
    switch(e.which) {
      case 37:
        prev.trigger("click");
        break;
      case 39:
        next.trigger("click");
        break;
    }
  });
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js