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

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

Рис. №1. Расположение центра трансформации по умолчанию

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

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

Синтаксис

transform-origin: <x> <y> <z>

Значения

В качестве значений transform-origin принимает через пробел координаты X, Y и Z центра трансформации:

координата 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).
координата Z – любые доступные в CSS единицы измерения длины, исключая проценты и ключевые слова.

Подробнее о единицах измерения доступных в CSS можно узнать здесь.

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

Ссылки

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

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

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

Примеры

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;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		margin-top: 20px;
		padding: 20px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		}


		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{
		transform: perspective(300px) rotateX(0.3rad);
		}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{
		transform-origin: 0% 0px;
		transform: perspective(300px) rotateX(0.3rad);
		}
		
		/* Это класс 3-го трансформируемого абзаца */	
		.p_3{
		transform-origin: -150% 130% 0px;
		transform: perspective(300px) rotateX(0.3rad);
		}
				
		/* Это класс 4-го трансформируемого абзаца */	
		.p_4{
		transform-origin: 150% -130% 100px;
		transform: perspective(300px) rotateX(0.3rad);
		}			
		
	</style>
		
</head>
<body>
		
	<div>
		<p>
			Простой абзац. 
		</p>
		
		<p class="p_1">
			1-й трансформированный абзац: <br>
			transform-origin: 50% 50%
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			transform-origin: 0% 0px
		</p>
		
		<p class="p_3">
			3-й трансформированный абзац: <br>
			transform-origin: -150% 130% 0px
		</p>
		
		<p class="p_4">
			4-й трансформированный абзац: <br>
			transform-origin: 150% -130% 100px
		</p> 
	</div>

</body>
</html>

Пример №1