Свойство perspective задает перспективу в трехмерном пространстве. Это значит элемент будет выглядеть так, как будто мы смотрим на него глазами где-то в объеме. В этом случае прямые углы будут отнюдь не прямыми, а то, что находится ближе к нам - будет казаться больше, чем то, что находится дальше.

Внимание: вы сможете увидеть как работает это свойство, только когда у элемента есть точки, у которых разное положение по оси Z. Например, когда элемент повернули по оси X или Y.

Это свойство следует использовать совместно с perspective-origin.

Это свойство применяется для родителя того элемента, которому нужно установить перспективу. Не путайте со свойством transform: perspective - оно задается конкретному элементу.

Синтаксис

селектор {
	perspective: значение | none;
}

Значения

Значение Описание
Значение Любые CSS единицы (кроме %). Чем больше значение - тем дальше элемент находится от зрителя и тем менее искажен он будет.
none Перспективы нет.

Значение по умолчанию: none.

Примеры

Примеры смотрите в самых современных браузерах.

Пример

В данном примере у нас есть элемент, который повернут по оси Y (без этого мы не увидим эффекта), а к его родителю применена перспектива. Сам элемент превратится из прямоугольника в трапецию (как будто мы смотрим на него в объеме):

#parent {
	display: inline-block;
	-o-perspective: 300px;
	-ms-perspective: 300px;
	-moz-perspective: 300px;
	-webkit-perspective: 300px;
	perspective: 300px;
	border: 1px solid black;
	margin: 30px;
}
#elem {
	border: 3px solid black;
	width: 300px;
	height: 100px;
	-o-transform: rotateY(60deg);
	-ms-transform: rotateY(60deg);
	-moz-transform: rotateY(60deg);
	-webkit-transform: rotateY(60deg);
	transform: rotateY(60deg);
}

Результат выполнения кода:

Привет, мир!