бигборд 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: url("http://demo.marcofolio.net/rotating_billboard/images/billboard.png") no-repeat;
  background-size: 100%;
  width: 600px;
  height: 600px;
}

#billboard {
  list-style: none;
  padding-top: 4%;
  padding-left: 7%;
      perspective: 800px; // 123
  li {
    display: inline;
    float: left;
    div {
      height: 100%;
      width: 5%;
      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: 0 0;
      margin-left: 0;
    }
    &:nth-child(2) div {
      background-position: -5% 0;
      margin-left: 5%;
    }
    &:nth-child(3) div {
      background-position: -10% 0;
      margin-left: 10%;
    }
    &:nth-child(4) div {
      background-position: -15% 0;
      margin-left: 15%;
    }
    &:nth-child(5) div {
      background-position: -20% 0;
      margin-left: 20%;
    }
    &:nth-child(6) div {
      background-position: -25% 0;
  ...