Позиционирующие блоки с измененным translateZ CSS - PullRequest
Новая
       14

Позиционирующие блоки с измененным translateZ CSS

0 голосов
/ 01 апреля 2020

Я реализую чистый CSS эффект параллакса согласно описанному здесь . Например, у меня есть это: 

.container {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: scroll;
    perspective: 1px;
    perspective-origin: 0 0;
    background: transparent;
}
.block-1 {
    width: 240px;
    height: 150px;

    left: -200px;
    top: 601px;

    background-color: black;

    &.parallax {
        transform-origin: 0 0%;
        transform: translateZ(-20px) scale(21);
    }
}

Когда пользователь достигает какой-либо точки на экране, я хочу, чтобы мой block-1 начал двигаться и использовал эффект параллакса. Но проблема в том, что, если я использую этот метод с изменением translateZ, мой block-1 будет перемещен, и мне нужно будет применить некоторые сумасшедшие значения для top и left, чтобы получить его в том же месте, когда он было до того, как я применил .parallax: 

&.parallax {
        left: -3000px; 
        top: 2000px;  
        transform-origin: 0 0%;
        transform: translateZ(-20px) scale(21);
    }

Но мне нужно, чтобы мой .block-1 двигался только вверх и вниз с параллаксом, а не где-то сдвигался, потому что старых left и top больше нет appliable. Таким образом, вопрос в том, есть ли какая-нибудь формула, которую я могу использовать для вычисления новой верхней и левой части того же объекта, но с измененным преобразованием transform: translateZ(-20px) scale(21);?

...