css.in.ua
Підтримати

css властивість transform-origin

Властивість transform-origin змінює положення точки відносно якої елемент трансформується. Для 2D перетворення дозволено змінювати Х та У вісі. Для 3D перетворення дозволено змінювати Z-вісь елемента. Іншими словами, ця властивість дозволяє нам визначати базову позицію для траснформації елементу.

Властивість `transform-origin`

Відлік координат ведеться від лівого верхнього кута елемента, за замовчуванням точка трансформації знаходиться в його центрі. При використанні відсотків вони беруться від розмірів елемента.

Нотатка:

Ця властивість використовується разом з властивістю transform.
Нотатка:

Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка transform-origin може змінюватися у майбутньому.

Синтаксис

transform-origin: x-axis y-axis z-axis|initial|inherit;

Властивість transform-origin може отримувати 5 значень:

x-axis

Зміщення по горизонталі (X вісь).

Дозволено використовувати такі значення:

  • left
  • center
  • right
  • length
  • %
y-axis

Зміщення по вертикалі (Y вісь).

Дозволено використовувати такі значення:

  • left
  • center
  • right
  • length
  • %
z-axis

Зміщення по Z вісі. Дозволено використовувати будь-які одиниці вимірювання довжини прийняті в CSS.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента.

Значення без задання: 50% 50% 0
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.transformOrigin="0 0"

Переглядачі

Переглядач
transform-origin

36.0
5.0 -webkit-

10.0
9.0 -ms-

16.0
3.5 -moz-

9.0
4.0 -webkit-

23.0
15.0 -o-
12.1
11.5 -o-

12.0
Переглядач
transform-origin

2.1 -webkit-

16.0
3.5 -moz-

9.2
4.0 -webkit-

Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад впливу на елемент різних значень властивості

Простий приклад роботи властивості

Встановлення центральної точки для обертання навколо неї елемента.

div { 


  -ms-transform: rotate(45deg); /* IE 9 */ 


  -ms-transform-origin: 20% 40%; /* IE 9 */ 


  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */ 


  -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */ 


  transform: rotate(45deg); 


  transform-origin: 20% 40%; 


}

Додаткові посилання

Документи

Зв'язок