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

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

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

правити

Нотатка

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

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

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

x-axis

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

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

• left
• center
• right
• length
• %

автор: Svitlana

правити

y-axis

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

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

• left
• center
• right
• length
• %

автор: Svitlana

правити

z-axis

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

автор: Svitlana

правити

initial

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

автор: Svitlana

правити

inherit

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	36	16	9	23	12	10

Підтримка: мобільні переглядачі

Переглядач
	37	36	16	9

Приклади

+ запропонувати свій приклад у пісочниці

<div class="wrap"><div class="box center">центр</div></div>
<div class="wrap"><div class="box corner">20% 40%</div></div>

.wrap {
    display: inline-block;
    margin: 32px;
}

.box {
    width: 90px;
    height: 90px;
    display: grid;
    place-items: center;
    background: #0172ad;
    color: #fff;
    animation: turn 3s linear infinite;
}

.center { transform-origin: center; }
.corner { transform-origin: 20% 40%; }

@keyframes turn {
    to { transform: rotate(360deg); }
}