Свойство 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;
}