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

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

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

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

Синтаксис

селектор {
	transform: perspective(значение);
}

Значения

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

Значение по умолчанию: 0 (?).

Примеры

Пример

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

#elem {
	border: 3px solid black;
	width: 300px;
	height: 100px;
	-o-transition: transform 1s linear;
	-ms-transition: transform 1s linear;
	-moz-transition: transform 1s linear;
	-webkit-transition: transform 1s linear;
	transition: transform 1s linear;
	-o-transform: rotateY(60deg);
	-ms-transform: rotateY(60deg);
	-moz-transform: rotateY(60deg);
	-webkit-transform: rotateY(60deg);
	transform: rotateY(60deg);
}
#elem:hover {
	-o-transform: perspective(300px) rotateY(60deg);
	-ms-transform: perspective(300px) rotateY(60deg);
	-moz-transform: perspective(300px) rotateY(60deg);
	-webkit-transform: perspective(300px) rotateY(60deg);
	transform: perspective(300px) rotateY(60deg);
}

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

Привет, мир!