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

css-свойство perspective-origin (от англ. perspective origin – исходная точка для перспективы) задает координаты X и Y точки сходимости линий (т.е. местоположения глаз зрителя при взгляде на экран). По умолчанию эта точка находится на оси, проходящей через центр элемента перпендикулярно плоскости экрана (см. рисунок №1).

Рис. №1. Пример смещения точки сходимости линий при использовании перспективы

Свойство perspective-origin должно использоваться совместно с perspective для родительского блока и свойством transform для дочернего элемента.

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

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

Синтаксис

perspective-origin: <позиция>, где

Значения

В качестве значений perspective-origin принимает через пробел координаты X и Y точки сходимости линий:

координата X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50%), а также ключевые слова left (эквивалентно 0% по оси X), center (эквивалентно 50% по оси X) или right (эквивалентно 100% по оси X);
координата Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50%), а также ключевые слова top (эквивалентно 0% по оси Y), center (эквивалентно 50% по оси Y) или bottom (эквивалентно 100% по оси Y).

Отметим, что за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его ширины. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству perspective-origin только одно значение, то оно будет считаться координатой X, а для координаты Y будет использовано значение по умолчанию.

Ссылки

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

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

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

Примеры

HTML Результат

htmlCodes

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

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


		/* Это класс 1-го родительского div'а */	
		.div_1{
		perspective-origin: 50% 50%;			
		}
		
		/* Это класс 2-го родительского div'а */	
		.div_2{
		perspective-origin: 50% 100px;
		}
		
		/* Это класс 3-го родительского div'а */	
		.div_3{
		perspective-origin: 50% 200px;
		}
		
		/* Это класс 4-го родительского div'а */	
		.div_4{
		perspective-origin: 50% 400px;
		}		
		
	</style>
		
</head>
<body>
	
	<div class="div_1">
		<p>
			Дочерний элемент 1-го div'а:<br>
			perspective-origin: 50% 50%
		</p>
	</div>	
	
	<div class="div_2">
		<p>
			Дочерний элемент 2-го div'а:<br>
			perspective-origin: 50% 100px.	
		</p>
	</div>
	
	<div class="div_3">
		<p>
			Дочерний элемент 3-го div'а:<br>
			perspective-origin: 50% 200px.
		</p>
	</div>
	
	<div class="div_4">
		<p>
			Дочерний элемент 4-го div'а:<br>
			perspective-origin: 50% 400px.
		</p>
	</div>

</body>
</html>

Пример №1