<article>
  <h2>Scroll the List Below</h2>
				  <ul class="fly-reverse">  
    <li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li><li>Nine</li><li>Ten</li><li>Eleven</li><li>Twelve</li><li>Thirteen</li><li>Fourteen</li><li>Fifteen</li><li>Sixteen</li><li>Seventeen</li><li>Eighteen</li><li>Nineteen</li><li>Twenty</li><li>Twentyone</li><li>Twentytwo</li><li>Twentythree</li><li>Twentyfour</li><li>Twentyfive</li><li>Twentysix</li><li>Twentyseven</li><li>Twentyeight</li><li>Twentynine</li><li>Thirty</li><li>Thirtyone</li><li>Thirtytwo</li><li>Thirtythree</li><li>Thirtyfour</li><li>Thirtyfive</li><li>Thirtysix</li><li>Thirtyseven</li><li>Thirtyeight</li><li>Thirtynine</li><li>Fourty</li><li>Fourtyone</li><li>Fourtytwo</li><li>Fourtythree</li><li>Fourtyfour</li><li>Fourtyfive</li><li>Fourtysix</li><li>Fourtyseven</li><li>Fourtyeight</li><li>Fourtynine</li><li>Fifty</li><li>Fiftyone</li><li>Fiftytwo</li><li>Fiftythree</li><li>Fiftyfour</li><li>Fiftyfive</li><li>Fiftysix</li><li>Fiftyseven</li><li>Fiftyeight</li><li>Fiftynine</li><li>Sixty</li><li>Sixtyone</li><li>Sixtytwo</li><li>Sixtythree</li><li>Sixtyfour</li><li>Sixtyfive</li><li>Sixtysix</li><li>Sixtyseven</li><li>Sixtyeight</li><li>Sixtynine</li><li>Seventy</li><li>Seventyone</li><li>Seventytwo</li><li>Seventythree</li><li>Seventyfour</li><li>Seventyfive</li><li>Seventysix</li><li>Seventyseven</li><li>Seventyeight</li><li>Seventynine</li><li>Eighty</li><li>Eightyone</li><li>Eightytwo</li><li>Eightythree</li><li>Eightyfour</li><li>Eightyfive</li><li>Eightysix</li><li>Eightyseven</li><li>Eightyeight</li><li>Eightynine</li><li>Ninety</li><li>Ninetyone</li><li>Ninetytwo</li><li>Ninetythree</li><li>Ninetyfour</li><li>Ninetyfive</li><li>Ninetysix</li><li>Ninetyseven</li><li>Ninetyeight</li><li>Ninetynine</li>
  </ul>
			</article>
@mixin colors($max-count, $color-frequency){
  $color: 360/$max-count;
  
  @for $i from 1 through $max-count {
    &:nth-child(#{$max-count}n + #{$i}) {
      background: hsl(($i - 1)*($color / $color-frequency), 80%, 60%);
      color: hsl(($i - 1)*($color / $color-frequency), 80%, 50%);
    }
  }
}

body {
	background: #222;
	font-family: 'Gudea', sans-serif;
  font-weight: bold;
	font-size: 16px;
	margin-bottom: 40px;
	line-height: 1;
}

article {
	display: inline-block;
	margin: 20px;
  width: 90%;
  margin-left: 5%;
	height: 280px;
  h2 { 
    color: #ccc; 
    text-align: center;
    margin-top: 0;
  }
}

ul {
  width: 100%;
	height: 280px;
	position: relative;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: scroll;
	list-style: none;
  perspective: 400px;
  li {
		position: relative;
		padding: 15px;
		background: #eee;
		color: #252525;
		font-size: 18px;
		z-index: 2;
    transform: translateZ(0px);
    @include colors(50,1); 
    text-align: center;
	}
}

.fly-reverse {
  perspective: 400px;
  perspective-origin: 50% 50%;
    li {
      transition: all 600ms ease, opacity 300ms ease;
      transform-origin: 50% 50% -50px;
      &.past {
        opacity: 0;
        transform: rotateX( -180deg );
      }
      &.future {
        opacity: 0;
        transform: rotateX( 180deg );
      }
    }
  }
View Compiled
stroll.bind( 'ul.fly-reverse' );
Rerun