<div class="screen">
<ul>
  <li>
    <div><img src="//c1.staticflickr.com/5/4169/34365076740_7db2c44aba_b.jpg"/></div>
  </li>
  <li>
    <div><img src="//c1.staticflickr.com/1/652/33056747285_6492b85d10_b.jpg"/></div>
  </li>
  <li>
    <div><img src="//c1.staticflickr.com/3/2875/34157838335_ae6a6baeba_b.jpg"/></div>
  </li>
  <li>
    <div><img src="//live.staticflickr.com/3682/32620495483_c05713f96f_b.jpg"/></div>
  </li>
  <li>
    <div><img src="//c1.staticflickr.com/8/7398/10833476765_2ea8e5575a_b.jpg"/></div>
  </li>
  <li>
    <div><img src="//c1.staticflickr.com/4/3762/32599905243_1c89825e69_b.jpg"/></div>
  </li>
  <li>
    <div><img src="//c1.staticflickr.com/4/3826/12453747735_cd34e6a023_b.jpg"/></div>
  </li>
  <li>
    <div><img src="//c1.staticflickr.com/5/4173/34766696785_5db73a1478_b.jpg"/></div>
  </li>
  <li>
    <div><img src="//c1.staticflickr.com/6/5562/14620883715_9ddff4315d_b.jpg"/></div>
  </li>
  <li>
    <div><img src="//c1.staticflickr.com/9/8226/8513610242_0ed73eea9d_b.jpg"/></div>
  </li>
</ul>
</div>
@import "compass/css3";

$size: 100px;
$liNum: 10;
$liDeg: 360/$liNum;
body {
  margin: 0;
  background: #000;
  @include perspective(2000);
}
.screen {
  width: 800px;
  height: 300px;
  margin: auto;
  overflow: hidden;
  background: #000;
  @include transform-style(preserve-3d);
  @include perspective($size*10);
}
ul {
  display: block;
  position: relative;
  top: 100px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  @include transform-style(preserve-3d);
  @include animation(rotate 60s infinite linear);
}
li {
  position: absolute;
  display: block;
  list-style: none;
  width: 100%;
  pointer-events: none;
  @include transform-style(preserve-3d);
  > div {
    float: left;
    width: $size * 1.618;
    height: $size;
    line-height: $size;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    pointer-events: auto;
    overflow: hidden;
    @include transform(rotateY(90deg));
    @include transition(.2s);
    @include opacity(.7);
    &:hover {
      @include opacity(1);
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}
@for $i from 0 through $liNum {
  li:nth-child(#{$i + 1}) {
    @include transform(rotateY(($i * $liDeg)+deg));
  }
}

@-webkit-keyframes rotate {
  0% {@include transform(rotateX(-10deg) rotateY(0deg))}
  100% {@include transform(rotateX(-10deg) rotateY(360deg))}
}
@keyframes rotate {
  0% {@include transform(rotateX(-10deg) rotateY(0deg))}
  100% {@include transform(rotateX(-10deg) rotateY(360deg))}
}
View Compiled

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