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

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

Сообщение Anonymous »


Я пытаюсь реализовать эффект поворота страниц с помощью преобразований CSS, где прямоугольник на странице начинается с перпендикулярного и по мере того, как пользователь прокручивает страницу вниз, постепенно поворачивается до 45 градусов. Я экспериментировал со свойством Transform,

но у меня возникли некоторые проблемы с достижением желаемого эффекта.

Ссылка — https://www.exe3d.io/ ---> 1-й раздел

код

`

.scroll-transform-container { Transform-origin: левый верх; переход: преобразование .5s легкость выхода; анимация: 1 мс Rotate45DegAnimation; направление анимации: альтернативное; анимация-временная шкала: прокрутка (ближайший блок); перспективное происхождение: слева вверху;

@keyframes Rotate45DegAnimation { 0% { преобразование: перспектива (1000 пикселей) RotateY (90 градусов); } 100% { преобразование: перспектива (1600 пикселей) RotateY (20 градусов); } `

Вернуться в «CSS»