Как создать эффект поворота страницы с помощью 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 градусов); } `
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

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