seregadushka
@seregadushka
minsk

Как работает perspective:?

Выкладу основы :
transform: perspective(500px) -- указывается в самом элементе и действует на него.
perspective: 500px -- указывается для родителя, и действует на потомков.

Много инструкций. Под родителем подразумевается любой. Часто встречал
body { perspective: 500px }
И вроде у меня это тоже работало когда-то.

Вот 2 примера . По transform: perspective(500px) вопросов нет. Но в длинных @keyframes на десятки строк его указывать сложно . Оно действует на каждую строку отдельно. В примере я сократил @keyframes до 2 строк, было около 12.
perspective: указывает на всю страницу, потомком может быть много. perspective: одна на всех, все как в реале. По другому быть не может.
Помню, что раньше работало. Сейчас придумал какую-то Grid. Это причина ? Grid убивает общий perspective: ?
Пример : transform: perspective() + perspective:
Почему не работает body { perspective: 500px } ?

==================================================================

Пишу ответ на свой вопрос, после многочисленных исследовательских попыток. Краткая диссертация. В примере показан их конечный результат, все свойства оставлены в комментах:
В статье по ссылке уважаемой Ankhena в самом тексте 1 упоминание о transform-style:preserve-3d, ничего нового. Никаких особенностей у разметки FlexGrid и perspective: -- нет.

Поясню смысл самого вопроса.
Проблема: хотим анимировать сетку шириной со страницу. Для ее нормально смотрится perspective: 1000-2000px, ближе не надо. Но ее потомки высотой в 1 строку текста такую перспективу показывают плохо, неотличимы от плоской анимации. Значит, надо ставить разную перспективу.

И вот тут начинаются сложности:
perspective: для родителя, а transform-style:preserve-3d для ПРОМЕЖУТОЧНОГО родителя !
-- Если у родителя 1 потомок, перспектива работает, в этом случае transform-style:preserve-3d вообще не требуется. Чистая perspective: .
-- Если у родителя 2+ потомков, для анимирования самого внутреннего потомка, надо transform-style:preserve-3d (не наследуется) прописывать КАЖДОМУ промежуточному родителю, кроме самого ! Именно так. Например, указать общий класс {perspective: ...; transform-style:preserve-3d} и ставить этот класс всем родителям -- нет. Только раздельно --perspective: для внешнего, transform-style:preserve-3d всем промежуточным родителям, без анимируемого потомка.
Заметили ,сколько сложностей ? Это если вы хотите чистый эксперимент, с анимированием только нужного объекта.

Простая логика -- если человек ставит perspective:, понятно, что ему нужно 3D .
В старых инструктажах transform-style:preserve-3d описывается как свойство для ограничения загрузки процессора при обработке страницы в 3D. Тем более, оно не наследуется, опять же для ограничения глубоких вложений. Сейчас это не актуально.
Но div { transform-style:preserve-3d} не ограничишь.

Выводы:
1. Единственный способ включить перспективу всем объектам, всему body:
body { perspective: 1000px; }
div {  transform-style: preserve-3d; }

Последнее div или *{}, не документировано в статейках, но часто встречается вне статей. Считайте, хак.

2. Чтобы не заморачиваться с родителями, промежуточными родителями ... для анимации любого внутреннего элемента страницы указывается div { transform-style:preserve-3d} и забывается про него. Занимаемся только perspective: для любых объектов (их родителей).

3. Вложенные perspective: суммируют действие.

======== работает в чистом виде, без transform-style: preserve-3d; ========
.first_parent {perspective: ...}  
.any {transform: perspective(...);}


Сейчас Chromium активно обновляется в части CSS. Я описал для Сhr-126.
Вероятно, само transform-style: preserve-3d оставлено не надолго. Я не вижу в нем необходимости. Его механизм спокойно можно перенести внутрь perspective:
  • Вопрос задан
  • 183 просмотра
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
transform-style: preserve-3d; для грида
Читать: https://blog.openreplay.com/transform-your-website...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы