Свойство 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 уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.