Эффект параллакса CSS: почему translateZ () перемещает мой элемент? - PullRequest
Новая
       9

Эффект параллакса CSS: почему translateZ () перемещает мой элемент?

0 голосов
/ 21 июня 2019

Я пытаюсь создать простой CSS-эффект параллакса.В отличие от многих уроков, я хочу, чтобы это также влияло на содержание параллакс-div.Это работает хорошо, за исключением того, что, как только я применяю translateZ () и scale () к элементу, в зависимости от высоты области просмотра, элемент смещается, что приводит к «полям сверху».

Я попытался противостоять"margin" с "top: -27vh", но я не могу понять это правильно, и это также не кажется правильным решением. 

body {
 perspective: 1px;
 transform-style: preserve-3d;
 overflow-x: hidden;
 overflow-y: auto;
}

.showcase {
 position: relative;
 padding: 100px 0;
 text-align: center;
 background: blue;
 transform: translateZ(-2px) scale(3);
 z-index: -1;
}

https://jsfiddle.net/49rfkqbz/1/

Я бы хотел, чтобы параллакс-div (.showcase), а также основной раздел изначально отображались так же, как если бы не были добавлены перспектива и глубина.

...