Выкладу основы :
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_outer {perspective: ...}
.inner {transform: perspective(...);}
Сейчас Chromium активно обновляется в части CSS. Я описал для Сhr-126.
Вероятно, само transform-style: preserve-3d оставлено не надолго. Я не вижу в нем необходимости. Его механизм спокойно можно перенести внутрь perspective:
Простой
Средний