Перетворення-походження - CSS-хитрощі

transform-originВластивість використовується в поєднанні з CSS перетворення, що дозволяє змінити точку походження перетворення.

.box ( transform: rotate(360deg); transform-origin: top left; )

Як зазначено вище, transform-originвластивість може приймати до двох значень ключового слова або довжини, розділених пробілом, для 2D-перетворення та до трьох значень для 3D-перетворення.

Використання коду, наведеного вище, у вікні 200 на 200 пікселів, із перетворенням, застосованим до перенесеного за допомогою події клацання, поводилося б так:

Перевірте цю ручку!

За замовчуванням початком перетворення є "50% 50%", що знаходиться точно в центрі будь-якого даного елемента. Зміна початку координат на “верхній лівий” (як у демонстраційній версії вище) змушує елемент використовувати верхній лівий кут елемента як точку обертання.

Значення можуть бути довжини, відсотки або ключові слова top, left, right, bottom, і center.

Перше значення - горизонтальне положення, друге значення - вертикальне, а третє значення - положення на осі Z. Третє значення працюватиме лише у випадку використання 3D-перетворень, і воно не може бути відсотком.

Дивіться ілюстрацію перетворення ручки Shaw (@shshaw) на CodePen.