Как создать эффект поворота страницы с помощью CSS-преобразований при прокрутке? ⇐ CSS

[Anonymous]

.scroll-transform-container { transform-origin: left top ; transition: transform .5s ease-out; animation: 1ms rotate45DegAnimation; animation-direction: alternate; animation-timeline: scroll(block nearest); perspective-origin: left top; } @keyframes rotate45DegAnimation { 0% { transform: perspective(1000px) rotateY(90deg); } 100% { transform: perspective(1600px) rotateY(20deg); } } I'm trying to implement a page rotation effect using CSS transforms, where a rectangle on the page starts off being perpendicular and, as the user scrolls down, gradually rotates to 45 degrees. I've been experimenting with the transform property,

but I'm encountering some issues in achieving the desired effect.

Reference - https://www.hexa3d.io/ ---> 1st Section

Github - https://github.com/Aniruddha-Gade/next-app Live - https://next-app-six-wine.vercel.app/


Источник: https://stackoverflow.com/questions/781 ... -on-scroll