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.