section.cube#top
  h1 Scrolling cubic effect
  h2 wich is kinda 3d
  span Scroll down to see the effect
section.cube#content
  span Wow! That was so cool, lemme scroll up now

$orange: hsl(45, 100, 50)

body
  background: hsl(0, 0, 20)
  font-family: sans-serif
  font-weight: 400
  -webkit-perspective: 800px
  perspective: 800px

h1, h2
  position: absolute
  left: 50%
  transform: translateX(-50%)
  color: hsl(0, 0, 20)
  font-family: sans-serif
  font-weight: 600
  text-transform: uppercase
  letter-spacing: 2px
h1
  top: 24px
  font-size: 12px
h2
  top: 44px
  font-size: 10px
  opacity: 0.7
  
.cube
  position: relative
  width: 100%
  min-height: 100vh
  span
    position: absolute
    display: inline-block
    top: 50%
    left: 50%
    -webkit-transform: translate(-50%, -50%)
    transform: translate(-50%, -50%)
    border-radius: 3px
    padding: 10px
    font-size: 11px
    font-weight: 600
    text-transform: uppercase
    letter-spacing: 1px
  
#top
  background: $orange
  -webkit-transform-origin: 50% 100%
  transform-origin: 50% 100%
  span
    background: darken($orange, 5%)
    color: darken($orange, 30%)

#content
  background: hsl(0, 0, 100)
  -webkit-transform-origin: 50% 0%
  transform-origin: 50% 0%
  span
    background: hsl(0, 0, 95)
    color: hsl(0, 0, 50)
  
  
  

function rotateScenes(){
  var scroll = window.pageYOffset,
      relPos = scroll / height,
      angle = 90 * relPos;
  
  if(scroll >= height){
    section1.style.transform = "rotateX(90deg)";
    section2.style.transform = "rotateX(0deg)";
  }
  
  section1.style.transform = "rotateX(" + (angle) + "deg)";
  section2.style.transform = "rotateX(-" + (90 - angle) + "deg)";
}

var section1 = document.querySelector("#top"),
    section2 = document.querySelector("#content"),
    height = window.innerHeight;
window.addEventListener("scroll", rotateScenes);