Как создать эффект поворота страницы с помощью CSS-преобразований при прокрутке ⇐ CSS
-
Anonymous
Как создать эффект поворота страницы с помощью CSS-преобразований при прокрутке
Я пытаюсь реализовать эффект поворота страниц с помощью преобразований 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, где прямоугольник на странице начинается с перпендикулярного и по мере того, как пользователь прокручивает страницу вниз, постепенно поворачивается до 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 градусов); } `
Мобильная версия