CSS :: Свойство perspective

css-свойство perspective (от англ. perspective – перспектива, вид вдаль) активирует 3D-пространство внутри элемента-родителя и задает 3d-перспективу, т.е. расстояние по оси Z от плоскости экрана до точки сходимости линий (см. рисунок №1). В результате создается впечатление приближения либо отдаления элемента от зрителя.

Рис. №1. Зависимость масштабирования вдоль оси Z от 3d-перспективы

Масштабирование элемента пропорционально d/(d–z), где d (значение перспективы) - это расстояние от плоскости экрана до предполагаемого положения глаз зрителя, а Z - координата желаемого расположения плоскости элемента на оси Z, направленной к пользователю. Так на верхнем рисунке, чтобы создать для пользователя впечатление, что исходный круг (изображен сплошным контуром) на экране стал ближе к нему в два раза (круг изображен пунктиром), его размер также необходимо увеличить в два раза (голубой круг), т.к. d/(d–d/2)=2 (здесь z=d/2). На нижнем рисунке изображена ситуация, когда у пользователя создается впечатление, что исходный круг на экране удалился от него на половину расстояния от пользователя до экрана. Для этого потребовалось уменьшить размер исходного круга на треть, т.к. d/(d–(-d/2))=d/(d+d/2)=2/3 (здесь z=-d/2).

Cледует иметь в виду, что если перспективу не задавать, то будут отсутствовать и эффекты трансформации в трехмерном пространстве, например, повороты элемента вокруг осей X и Y или его перемещение вдоль оси Z.

Характеристики

Значение по умолчанию: none.
Применяется: к трансформируемым элементам.
Наследуется: нет.
Анимируется: да.
JavaScript: object.style.perspective="value".

Синтаксис

perspective: <расстояние> | none

Значения

расстояние – любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели), при этом чем больше положительное значение, тем менее выражен эффект перспективы, и наоборот. Отрицательные значения и нуль отменяют действие перспективы.
none – отменяет действие перспективы (используется по умолчанию).

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-transforms-2/#propdef-perspective

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/perspective

Подробно о трансформации элементов в нашем учебнике здесь.

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
				
		/* Оформляем родительский «div» абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		perspective: 300px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		margin-top: 20px;
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}

		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{transform: rotateX(0.3rad);}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{transform: perspective(100px) rotateX(0.3rad);}	
		
	</style>
		
</head>
<body>
		
	<div>
		<p>
			Я простой абзац, меня никто не трансформировал. 
		</p>
		
		<p class="p_1">
			Я дочерний элемент div'а, поэтому ко мне 
			применима перспектива (perspective: 300px;) 
			и заметен поворот вокруг оси Х, т.к.
			transform: rotateХ(0.3rad).
		</p>
		
		<p class="p_2">
			Моя перспектива была переопределена функцией 
			transform: perspective(100px) rotateX(0.3rad).
		</p>
			
	</div>

</body>
</html>

Пример №1