CSS-свойство perspective

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`.