CSS стиль transform-origin. Задание центра трансформации
CSS стиль transform-origin задает координаты точки, относительно которой будет происходить трансформация объекта.
Internet Explorer 9 поддерживает свойство -ms-transform.
Safari, Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.
Opera с версии 15 до 23 поддерживает свойство -o-transform.
Firefox до версии 16 поддерживает свойство -moz-transform.
Трансформации преобразовывают элемент, не влияя на остальные части веб-страницы, - это значит, что другие объекты не будут относительно него сдвигаться. По умолчанию трансформации происходят относительно центра элемента. Свойства при этом не наследуются.
Краткая информация по CSS-свойству transform-origin
| Значение по умолчанию | 50% 50% 0 |
|---|
| Наследуется | Нет |
|---|
| Применяется | К трансформируемым элементам |
|---|
Правила написания свойства transform-origin
transform-origin: <x> <y> <z>
Здесь:
<x> - координата по оси X. Может следующие значения: <размер> (в любой единице измерения CSS), <проценты>, left, center, right
<y> координата по оси Y. Может принимать значения: <размер> (в любой единице измерения CSS), <проценты>, top, center, bottom
<z> - координата по оси Z. Может задаваться только в любых единицах для измерения длины (кроме %).
Оси при трансформации элемента
Отсчет координат ведется от левого верхнего угла элемента. По умолчанию точка трансформации находится в центре объекта (см. рис. выше). При использовании процентов они высчитываются на основе размеров элемента.
Объектная модель
Объект.style.transformOrigin
Пример применения стиля transform-origin
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля transform-origin</title>
<style>
div {
border: 1px solid red;
margin: 60px 5px 0;
display:inline-block;
width: 170px;
}
p {
background: #ffbb00;
padding: 5px 10px;
/* Поворот на 15 градусов по часовой стрелки */
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
div:first-child p {
/* Точка поворота в правом верхнем углу */
-o-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-moz-transform-origin: 100% 0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
</style>
</head>
<body>
<div><p>С transform-origin</p></div>
<div><p>Без transform-origin</p></div>
</body>
</html>
Применение свойства transform-origin