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

<figure>
    <div class="slot"><div class="box center">1</div></div>
    <figcaption>center — без задання</figcaption>
</figure>

<figure>
    <div class="slot"><div class="box tl">2</div></div>
    <figcaption>left top</figcaption>
</figure>

<figure>
    <div class="slot"><div class="box br">3</div></div>
    <figcaption>right bottom</figcaption>
</figure>

figure {
    display: inline-block;
    margin: 26px 34px 26px 0;
    font: 12px monospace;
    text-align: center;
    vertical-align: top;
}

.slot {
    width: 72px;
    height: 72px;
    margin: 0 auto 26px;
    border: 1px dashed #999;
}

.box {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    background: #0172ad;
    color: #fff;
    transform: scale(1.5);
}

.center { transform-origin: center; }
.tl     { transform-origin: left top; }
.br     { transform-origin: right bottom; }

<p>Вибери потрібне значення для <code>transform-origin</code>(у відсотках):</p>

<label>X: <input type="number" value="0" step="10" id="field"></input></label>
<br><br>
<label>Y: <input type="number" value="0" step="10" id="field2"></input></label>

<div id="block">
  <code>transform: rotate(60deg);</code>
</div>

body {
	padding: 36px;
  text-align: center;
  line-height: 1.45;
  font-size: 17px;
  font-family: sans-serif;
}

#field,
#field2{
  padding: 8px;
}

#block {
  width: 175px;
  padding: 30px;
  text-align: center;
  background: gold;
  margin: 106px auto 0 auto;
  transform: rotate(20deg);
}

var block = document.getElementById('block');
var field = document.getElementById('field');
var field2 = document.getElementById('field2');

field.onchange = field2.onchange = function change() {
  var newVal = getNewValue();
  block.style.transformOrigin = newVal[0] + '% ' + newVal[1] + '%';
};

function getNewValue() {
  var result = [];
  result[0] = field.value;
  result[1] = field2.value;
  return result;
}
//# sourceURL=pen.js

<div class="text">На рисунку можна бачити два однакових блока, тільки для другого задана властивість <strong>transform-origin: top left;</strong> разом з властивістю <strong>transform: rotate(16deg);</strong></div>
<div class="rotate">
  <pre><code>transform: rotate(16deg); 
<strong>transform-origin: top left;</strong></code></pre>
</div>

.text{
  background: none;
  width: 100%;
}
div {
  width: 310px;
  padding: 30px 20px 30px 46px;
  background: gold;
  font-family: monospace;
  font-size: 17px;
}

.rotate {
  margin: 40px;
  margin: auto;
  transform: rotate(16deg); 
  transform-origin: top left;
}