Свойство CSS perspective помещает элемент в трехмерное пространство, и позволяет управлять расстоянием между плоскостью Z и пользователем.
Сила эффекта определяется значением свойства. Чем меньше значение, тем ближе вы будете к плоскости Z и тем более выразительным будет визуальный эффект. Чем больше значение, тем менее заметным будет эффект.
Важно отметить, что само свойство perspective не влияет на визуализацию элемента, оно просто включает 3D-пространство для дочерних элементов. Поэтому следует понимать разницу между функцией transform: perspective() и свойством perspective. Первый придает элементу глубину, а второй создает трехмерное пространство с преобразованными дочерними элементами.
Пример с использованием свойства perspective:
В примере продемонстрированы 4 элемента с различными преобразованиями: меняется угол поворота и ось. К родителю применено свойство perspective, за счет чего поворот теперь изображен в 3D-пространстве.
Установка perspective для родителя приводит к тому, что все дочерние элементы используют одно и то же трехмерное пространство и, следовательно, одну и ту же точку схождения.
Поэкспериментируем с чем-нибудь более сложным - с кубом и примененными к нему преобразованиями.
Как делается такой куб: исходный блок-обертка (.wrapper) придает кубу перспективу, вложенная обертка (.cube) будет содержать все стороны куба и будет иметь относительное позиционирование, внутренние элементы (.side), они же стороны, абсолютно спозиционированы и имеют свой номер. Каждая из сторон имеет собственное преобразование в трехмерном пространстве.
В зависимости от значения свойства perspective, куб имеет то или иное положение в пространстве относительно пользователя.
Третий пример отображает использование perspective в связке с transition при наведении на элемент:
Комментарии (0)