<ul>
  <li>
    <div>li1</div>
  </li>
  <li>
    <div>li2</div>
  </li>
  <li>
    <div>li3</div>
  </li>
  <li>
    <div>li4</div>
  </li>
  <li>
    <div>li5</div>
  </li>
  <li>
    <div>li6</div>
  </li>
  <li>
    <div>li7</div>
  </li>
  <li>
    <div>li8</div>
  </li>
  <li>
    <div>li9</div>
  </li>
  <li>
    <div>li10</div>
  </li>
  <li>
    <div>li11</div>
  </li>
  <li>
    <div>li12</div>
  </li>
  <li>
    <div>li13</div>
  </li>
  <li>
    <div>li14</div>
  </li>
  <li>
    <div>li15</div>
  </li>
  <li>
    <div>li16</div>
  </li>
  <li>
    <div>li17</div>
  </li>
  <li>
    <div>li18</div>
  </li>
  <li>
    <div>li19</div>
  </li>
  <li>
    <div>li20</div>
  </li>
</ul>
@import "compass/css3";

@import "compass/utilities/general/clearfix";
$size: 100px;
$liNum: 20;
$liDeg: 360/$liNum;

body {
  background: #000;
  @include perspective($size*5);
}
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%;
  background-color: rgba(#fff,.05);
  @include transform-style(preserve-3d);
  > div {
    float: left;
    width: $size;
    height: $size;
    line-height: $size;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
    @include transform(rotateY(90deg));
    @include transition(.2s);
    &:hover {
      @include opacity(.6);
    }
  }
}
@for $i from 0 through $liNum {
  li:nth-child(#{$i + 1}) {
    @include transform(rotateY(($i * $liDeg)+deg));
  }
}

@-webkit-keyframes rotate {
  0% {@include transform(rotateY(0deg))}
  100% {@include transform(rotateY(360deg))}
}
@keyframes rotate {
  0% {@include transform(rotateY(0deg))}
  100% {@include transform(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