Главная → HTML уроки и советы → CSS → Свойство CSS transform-origin

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

Свойство CSS transform-origin нужен для изменения центра координат относительно которого будет осуществляться трансформация (transform). Естественно этот тег работает только в случае трансформации.

Синтаксис CSS transform-origin

transform-origin: X Y Z;

Где Х может принимать значения

длина - задается в px относительно центра объекта (например, 5px)
проценты - задается в % относительно центра объекта (50% - это центр)
left - относительно левого края объекта
center - относительно центра (стоит по умолчанию)
right - относительно правого края объекта

Где Y может принимать значения

длина - задается в px относительно центра объекта (например, 5px)
проценты - задается в % относительно центра объекта (50% - это центр)
top - относительно верхнего края объекта
center - относительно центра (стоит по умолчанию)
bottom - относительно нижнего края объекта

Где Z может принимать значения только в единицах.

Прежде чем рассматривать примеры, скажем пару слов про особенности в браузерах.

Браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS:

-ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
-webkit-transform-origin - для Chrome, Safari, Android и iOS
-o-transform-origin - для Opera до версии 12.10
-moz-transform-origin - для Firefox до версии 16.0

Примеры с transform-origin

Пример #1. Простое вращение относительно левого верхнего угла

<html>
<head>
<style>
	.primer1{ 
	width: 100px; 
	height: 100px; 
	background: #444;
	margin: 30px;
	}
	.primer1:hover{ 
	width: 100px; 
	height: 100px; 
	background: #888;
	margin: 30px;
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	transform-origin: 0px 0px;
	-ms-transform-origin: 0px 0px;
	-webkit-transform-origin: 0px 0px;
	-o-transform-origin: 0px 0px;
	-moz-transform-origin: 0px 0px;
}
</style>
</head>
<body>
	<div class="primer1"></div> 
 </body>
</html>

На странице преобразуется в следующее

Пример #2. Простое вращение относительно правого нижнего угла

<html>
<head>
<style>
	.primer2{ 
	width: 100px; 
	height: 100px; 
	background: #444;
	margin: 30px;
	}
	.primer2:hover{ 
	width: 100px; 
	height: 100px; 
	background: #888;
	margin: 30px;
	-ms-transform: rotate(20deg);
	-webkit-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-moz-transform: rotate(20deg);
	transform: rotate(20deg);
	transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-webkit-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	}
</style>
</head>
<body>
	<div class="primer2"></div>  
</body>
</html>

На странице преобразуется в следующее

Пример #3. Масштабирование относительно левого нижнего угла

<html>
<head>
<style>
	.primer3{ 
	width: 100px; 
	height: 100px; 
	background: #444;
	margin: 30px;
	}
	.primer3:hover{ 
	width: 100px; 
	height: 100px; 
	background: #888;
	margin: 30px;
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-o-transform: scale(1.5);
	-moz-transform: scale(1.5);
	transform: scale(1.5);
	transform-origin: 0% 100%;
	-ms-transform-origin: 0% 100%;
	-webkit-transform-origin: 0% 100%;
	-o-transform-origin: 0% 100%;
	-moz-transform-origin: 0% 100%;
	}
</style>
</head>
<body>
	<div class="primer3"></div>  
</body>
</html>

На странице преобразуется в следующее

Пример #4. Масштабирование относительно левого верхнего угла

<html>
<head>
<style>
	.primer3{ 
	width: 100px; 
	height: 100px; 
	background: #444;
	margin: 30px;
	}
	.primer3:hover{ 
	width: 100px; 
	height: 100px; 
	background: #888;
	margin: 30px;
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-o-transform: scale(1.5);
	-moz-transform: scale(1.5);
	transform: scale(1.5);
	transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	}
</style>
</head>
<body>
	<div class="primer4"></div>  
</body>
</html>

На странице преобразуется в следующее

Пример #5. Масштабирование относительно произвольной точки

Координаты могут выходить и за пределы объекта. Ниже представлен соответствующий пример со значениями 100% и 150% соответственно.

<html>
<head>
<style>
	.primer5{ 
	width: 100px; 
	height: 100px; 
	background: #444;
	margin: 30px;
	}
	.primer5:hover{ 
	width: 100px; 
	height: 100px; 
	background: #888;
	margin: 30px;
	-ms-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	-o-transform: scale(1.5);
	-moz-transform: scale(1.5);
	transform: scale(1.5);
	transform-origin: 100% 150%;
	-ms-transform-origin: 100% 150%;
	-webkit-transform-origin: 100% 150%;
	-o-transform-origin: 100% 150%;
	-moz-transform-origin: 100% 150%;
	}
</style>
</head>
<body>
	<div class="primer5"></div> 
	</body>
</html>

На странице преобразуется в следующее

Для обращения из JavaScript к свойству CSS transform-origin используется следующая конструкция:

[window.]document.getElementById("elementID").style.transformOrigin

Читайте также:
• Как сделать треугольник через CSS
• Свойство display
• Свойство transform
• Свойство border
• Свойство background
• Свойство transition
• Свойство text-transform
• Свойство box-shadow
• Медиа запросы (@)

← Перейти в каталог CSS уроков

© 2010-2020 - Zarabotat-Na-Sajte.ru