CSS-свойство perspective определяет перспективу, с которой будут просматриваться все дочерние элементы объекта. Обычно оно определяет расстояние между плоскостью Z = 0 и зрителем, чтобы дать ощущение глубины трехмерному элементу. Каждый 3D-элемент с Z > 0 становится больше, а каждый 3D-элемент с Z < 0 становится меньше.

Значение по умолчанию: none
Применяется к: Трансформируемые элементы
Наследование: Нет
Анимирование: Да. Анимируемые свойства
Версия: Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

perspective: length | none | initial | inherit

Примеры написания кода свойства perspective:

.container {
    width: 125px;
    height: 125px;
    perspective: 500px;
    border: 4px solid #e5a043;
    background: #fff2dd;
}
.transformed {
    -webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
    transform: translate3d(25px, 25px, 50px); /* Standard syntax */
}

Значения свойств

В следующей таблице описаны значения этого свойства.

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

Поддержка браузеров

Свойство perspective поддерживается во всех основных браузерах.

Читайте также

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.