CSS свойство perspective

Свойство perspective определяет, на сколько пикселей удален 3D элемент от точки обзора. Это свойство позволяет изменять перспективу, откуда просматриваются 3D элементы.

При определении свойства perspective для элемента, перспективный вид получают именно дочерние элементы, а не сам элемент.

Свойство perspective воздействует только на 3D трансформированные элементы.

Используйте это свойство вместе со свойством perspective-origin, которое позволяет изменять нижнее положение 3D элементов.

CSS синтаксис

perspective: расстояние | none | initial | inherit;

Возможные значения

ЗначениеОписание
расстояниеУказывает на сколько пикселей элемент удален от точки обзора. Нулевое или отрицательное значение сбрасывает перспективу.
noneЗначение по умолчанию. То же, что и 0. Перспектива не задана.
inheritЗначение наследуется от родительского элемента.
initialУстанавливает значение по умолчанию.

Пример использования

Устанавливаем перспективу откуда будет просматриваться элемент


div {
     -webkit-perspective: 500px; /* Chrome, Safari, Opera */
     perspective: 500px;
}