Как мне переместить элемент назад по оси z и вернуть его дочерний элемент в исходное положение z? - PullRequest
Новая
       61

Как мне переместить элемент назад по оси z и вернуть его дочерний элемент в исходное положение z?

0 голосов
/ 30 мая 2020

Я пытаюсь понять, как работает установка перспективы на преобразованные элементы.

Я пытаюсь преобразовать один элемент -1000 пикселей назад по оси z, а затем преобразовать пару его дочерних элементов +1000 обратно в их исходное положение по оси Z. Я бы хотел, чтобы эти дочерние элементы (верхний и нижний колонтитулы в приведенном ниже примере) не были затронуты, но оставшаяся часть элемента была удалена. Я могу заставить преобразования работать без проблем, но мой вопрос относится к свойству перспективы.

Например: 


<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
</head>

<body>
<div id="root" class="absolute inset-0 h-screen w-screen" style="transform-style: preserve-3d; perspective: 1000px">

        <div id="app" class="bg-blue-300 absolute inset-0 h-screen w-screen flex flex-col justify-between"
        style="transform: translate3d(0px, 0px, -1000px); transform-style: preserve-3d; perspective: 2000px">

            <div id="header" class="block bg-red-500 h-12 shadow-md flex justify-between items-center" style="transform: translate3d(0px, 0px, 1000px)"></div>
            <div id="footer" class="block bg-orange-500 h-12 shadow flex justify-between items-center" style="transform: translate3d(0px, 0px, 1000px)"></div>

        </div>
    </div>
        <script src="src/index.js">
        </script>
</body>

</html>

работает ссылка на код и ящик здесь .

После перевода div 'app' обратно на 1000 пикселей (с перспективой 1000 пикселей на его родительский элемент) я мог бы подумать, что я установил перспективу 2000 пикселей для приложения div (будучи исходной перспективой 1000 пикселей на root div + 1000 пикселей из перевода), но когда я это сделаю, этого будет недостаточно (элемент заголовка за пределами экрана). Я могу получить желаемый эффект, установив перспективу на бесконечность ( здесь используется 9999999 пикселей ), но при этом возникает проблема потери любого восприятия глубины для любых других дочерних элементов приложения div.

Кто-нибудь знает, почему это так или как я могу переместить один элемент назад и вернуть его дочерние элементы в исходное положение по оси Z на экране, используя нормальные значения перспективы?

...