#StackBounty: #javascript #html #css #jquery-animate #css-animations How to rotate background image on scroll

Bounty: 50

I am trying to rotate background image while scrolling. The effect should look like cube. Sadly I could not find a way with css and jquery to make it look like in the video. On the gif, when scrolling down from gallery to next page, there is grill background which rotates and stretches by amount of page shown.

EDIT: Rotating animation has to look like this

What have I tried so far (unsuccessfully)

<

div class=”snippet”>

$(function() {
  var rotation = 0,
    scrollLoc = 0;
  $(window).scroll(function() {
    $("#galerie").text($(document).scrollTop() + "=ScrollTop,WinHeight=" + $(window).height());
    var newLoc = $(document).scrollTop();
    var diff = scrollLoc - newLoc;
    rotation += diff, scrollLoc = newLoc;
    var rotationStr = "rotateX(" + rotation / ($(window).height() * 2) + "turn)";
    $("#home").css({
      "-webkit-transform": rotationStr,
      "-moz-transform": rotationStr,
      "transform": rotationStr,
      "background-size": -rotation
    });
  });
})
body,
html {
  height: 100%;
}

body {
  background-color: #090909;
}

#home {
  height: 100%;
  position: relative;
  overflow: hidden;
}

#galerie {
  color: green;
}

#home:before {
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
  background-color: grey;
  background-attachment: initial;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

<body>
  
TestText
</div>


























































































</body>


Get this bounty!!!