perspective

Обновлено: 30.05.2022

perspective

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

Краткая информация

Значение по умолчанию none
Наследуется Нет
Применяется К трансформируемым элементам
Анимируется Да

Синтаксис

perspective: none | <размер>

Значения

none Указывает, что не применять перспективу к элементу.
<размер> Расстояние от плоскости монитора до точки сходимости линий. Нулевое или отрицательное значение отменяет действие перспективы. Чем меньше значение, тем более выраженной выглядит перспектива и наоборот.

Пример

Результат данного примера показан на рис. 1. Обратите внимание, что перспектива применяется не к элементам напрямую, а к их родителю. Для изменения перспективы у отдельных элементов используется функция perspective() свойства transform.

Рис. 1. Влияние перспективы на вид фотографий

Объектная модель

Объект.style.perspective

Примечание

Chrome до версии 45, Safari до версии 9, Opera до версии 23, Android понимают свойство -webkit-perspective.

Firefox до версии 16 понимает свойство -moz-perspective.

Браузеры

perspective

Посмотреть совместимость на Can I use?

perspective