Changing perspective on scroll

I wanted to achieve an effect: while scrolling an 3D-elements perspective should change depending the position inside the viewport. For this you only have to set the CSS-property perspective on the body element and be sure that the content is scolling inside of the body element with overflow-y:auto;.


The following code creates this effect:

html, body {
 width: 100%;
 height: 100%;
 overflow: hidden;
body {
 overflow: auto;
 perspective: 500px;

The full code can be seen in the codepen example.