бигборд 3

by avgustre

HTML

<div id="billboard-outer">
  <ol id="billboard">
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
    <li>
      <div></div>
      <div></div>
      <div></div>
    </li>
  </ol>
</div>

SCSS

/* BILLBOARD */

#billboard-outer {
  background-image: url("http://demo.marcofolio.net/rotating_billboard/images/billboard.png");
  height: 499px;
}

#billboard {
  list-style: none;
  padding-top: 35px;
  padding-left: 62px;
      perspective: 800px; // 123
  li {
    display: inline;
    float: left;
    div {
      height: 335px;
      width: 36px;
      position: absolute;
      -webkit-backface-visibility: hidden;
      -webkit-transition-property: -webkit-transform;
      &:nth-child(1) {
        background-image: url("http://demo.marcofolio.net/rotating_billboard/images/cocktail.png");
        z-index: 999;
        -webkit-animation: rotate 10s linear;
        -webkit-animation-iteration-count: infinite;
        /* Keep on looping */
        -webkit-transform-origin: center;
      }
      &:nth-child(2) {
        background-image: url("http://demo.marcofolio.net/rotating_billboard/images/coffee.png");
        z-index: 998;
        -webkit-animation: rotate2 10s linear;
        -webkit-animation-iteration-count: infinite;
        /* Keep on looping */
        -webkit-transform-origin: right;
      }
      &:nth-child(3) {
        background-image: url("http://demo.marcofolio.net/rotating_billboard/images/shotglass.png");
        z-index: 997;
        -webkit-animation: rotate3 10s linear;
        -webkit-animation-iteration-count: infinite;
        /* Keep on looping */
        -webkit-transform-origin: left;
      }
    }
    &:nth-child(1) div {
      background-position: -0px 0;
      margin-left: 0px;
    }
    &:nth-child(2) div {
      background-position: -36px 0;
      margin-left: 36px;
    }
    &:nth-child(3) div {
      background-position: -72px 0;
      margin-left: 72px;
    }
    &:nth-child(4) div {
      background-position: -108px 0;
      margin-left: 108px;
    }
    &:nth-child(5) div {
      background-position: -144px 0;
      margin-left: 144px;
    }
    &:nth-child(6) div {
      background-position: -180px 0;
      margin-left:...