перспектива

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2022 года.

Свойство perspective CSS определяет расстояние между плоскостью z=0 и пользователем, чтобы придать элементу с 3D-позиционированием некоторую перспективу.

Попробуйте

Синтаксис

/* Keyword value */
perspective: none;

/* <length> values */
perspective: 20px;
perspective: 3.5em;

/* Global values */
perspective: inherit;
perspective: initial;
perspective: revert;
perspective: revert-layer;
perspective: unset;

Значения

none: Указывает, что преобразование перспективы применять не нужно.
<length>: <length>, задающий расстояние от пользователя до плоскости z=0. Используется для применения преобразования перспективы к дочерним элементам. Отрицательные значения являются синтаксическими ошибками. Если значение меньше 1px, оно ограничено значением 1px.

Описание

Каждый 3D-элемент со значением z>0 становится больше; каждый 3D-элемент со значением z<0 становится меньше. Сила эффекта определяется значением данного свойства. Большие значения perspective вызывают небольшое преобразование; маленькие значения perspective вызывают большое преобразование.

Части 3D-элементов, которые находятся позади пользователя — то есть, координаты их оси z больше значения свойства perspective CSS-свойства — не отображаются.

Точка схода по умолчанию расположена в центре элемента, но её положение может быть изменено с помощью свойства perspective-origin.

Использование этого свойства со значением, отличным от none создаёт новый контекст стекирования. Также в этом случае объект будет служить блоком-контейнером для position: fixed элементов, которые он содержит.

Формальное определение

Начальное значение	`none`
Применимо к	преобразуемым элементам
Наследуется	нет
Вычисленное значение	абсолютная длина или `none`
Тип анимации	длина
Создаёт контекст стекирования	да

Формальный синтаксис

perspective = 
  none            |
  <length [0,∞]>

Примеры

Установка перспективы

Пример того, как меняется куб, если perspective устанавливается в различных позициях, приведён в Использование CSS-преобразований > Настройка перспективы.

Спецификации

Спецификация
CSS Transforms Module Level 2 # perspective-property

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`perspective`	3612	1212	164910–preview	2315	94	3618	164910	2414	9 В iOS 13 свойство `perspective` работало некорректно. Проблемы были исправлены в iOS 14. 2	3.01.0	4.43
`none`	12	12	10	15	4	18	10	14	3.2	1.0	4.4

См. также

Использование CSS-преобразований

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/perspective