Просмотров: 708

Свойство transform-origin

Возможные значения:

transform-origin: ось-X ось-Y ось-Z;

ось-X:

  • left
  • center
  • right
  • значение
  • %

ось-Y:

  • left
  • center
  • right
  • значение
  • % 

ось-Z:

  • значение

Значение по умолчанию: 50% 50% 0

Применим: к трансформирующимся элементам.

Наследуется: нет

Устанавливает положение вращаемого элемента. Т.е. не меняя угла поворота, можно изменить координаты точки, относительно которой происходит вращение.

<div style="width:500px; margin:auto">
<div style="width:150px; height:150px; background:#fafafa;">Блок 1</div>
<div style="width:150px; height:150px; background:#ccc; transform:rotate(15deg); transform-origin:25% 25%;">
 Блок для смещения 1
</div>
<div style="width:150px; height:150px; background:#ccc; transform:rotate(15deg); transform-origin:75% 75%;">
 Блок для смещения 2
</div>
<div style="width:150px; height:150px; background:#ccc; transform:rotate(15deg); transform-origin:450px -550px;">
 Блок для смещения 3
</div>
</div>

Обратите внимание, что отрицательные значения тоже допускаются.

transform-origin