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

правити

Переглядачі

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

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

Переглядач
transform-origin	36.0 <br> 5.0 -webkit-	16.0 <br> 3.5 -moz-	9.0 <br> 4.0 -webkit-	23.0 <br> 15.0 -o- <br> 12.1 <br> 11.5 -o-	12.0	10.0 <br> 9.0 -ms-

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

Переглядач
transform-origin	2.1 -webkit-	16.0 <br> 3.5 -moz-	9.2 <br> 4.0 -webkit-

Приклади

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

<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); }
}