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;.

Implementation

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.