CSS-свойство `transform-origin`

transform-origin — это свойство CSS, задающее точку начала преобразований элемента.

Попробуйте

transform-origin: center;

transform-origin: top left;

transform-origin: 50px 50px;

/* 3D rotation with z-axis origin */
transform-origin: bottom right 60px;

<section id="default-example">
  <div id="example-container">
    <div id="example-element">Rotate me!</div>
    <img
      alt=""
      id="crosshair"
      src="/shared-assets/images/examples/crosshair.svg"
      width="24px" />
    <div id="static-element"></div>
  </div>
</section>

@keyframes rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(30deg);
  }
}

@keyframes rotate3d {
  from {
    transform: rotate3d(0, 0, 0, 0);
  }

  to {
    transform: rotate3d(1, 2, 0, 60deg);
  }
}

#example-container {
  width: 160px;
  height: 160px;
  position: relative;
}

#example-element {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  align-items: center;
  justify-content: center;
  background: #f7ebee;
  color: black;
  font-size: 1.2rem;
  text-transform: uppercase;
}

#example-element.rotate {
  animation: rotate 1s forwards;
}

#example-element.rotate3d {
  animation: rotate3d 1s forwards;
}

#crosshair {
  width: 24px;
  height: 24px;
  opacity: 0;
  position: absolute;
}

#static-element {
  width: 100%;
  height: 100%;
  position: absolute;
  border: dotted 3px #ff1100;
}

const crosshair = document.getElementById("crosshair");
const el = document.getElementById("example-element");

function update() {
  const selected = document.querySelector(".selected");

  /* Restart the animation
           https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Tips */
  el.className = "";
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      el.className =
        el.style.transformOrigin.split(" ")[2] === "60px"
          ? "rotate3d"
          : "rotate";
    });
  });

  const transformOrigin = getComputedStyle(el).transformOrigin;
  const pos = transformOrigin.split(/\s+/);
  crosshair.style.left = `calc(${pos[0]} - 12px)`;
  crosshair.style.top = `calc(${pos[1]} - 12px)`;
}

const observer = new MutationObserver(() => {
  update();
});

observer.observe(el, {
  attributes: true,
  attributeFilter: ["style"],
});

update();
crosshair.style.opacity = "1";

Начало преобразования — это точка, вокруг которой применяется преобразование. Например, начало преобразования функции rotate() — это центр вращения.

По сути, это свойство оборачивает остальные преобразования элемента парой перемещений. Первое перемещение переносит начало преобразования в истинное начало координат $(0,0)$. Затем применяются остальные преобразования, и, поскольку начало преобразования находится в точке $(0,0)$, они выполняются относительно начала преобразования. Наконец, применяется обратное перемещение, возвращающее начало преобразования в исходное положение. Таким образом, это определение

transform-origin: -100% 50%;
transform: rotate(45deg);

даёт то же преобразование, что и

transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);

Если читать справа налево, translate(100%, -50%) — это перемещение начала преобразования в истинное начало координат, rotate(45deg) — исходное преобразование, а translate(-100%, 50%) — перемещение, возвращающее начало преобразования в исходное положение.

По умолчанию начало преобразования находится в точке center.

Синтаксис

/* One-value syntax */
transform-origin: 2px;
transform-origin: bottom;

/* x-offset | y-offset */
transform-origin: 3cm 2px;

/* x-offset-keyword | y-offset */
transform-origin: left 2px;

/* x-offset-keyword | y-offset-keyword */
transform-origin: right top;

/* y-offset-keyword | x-offset-keyword */
transform-origin: top right;

/* x-offset | y-offset | z-offset */
transform-origin: 2px 30% 10px;

/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 5px -3px;

/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 2cm;

/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 2cm;

/* Global values */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: revert-layer;
transform-origin: unset;

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

Если задано одно значение <length> или <percentage>, оно представляет горизонтальное смещение.

Если задано два или более значений и ни одно из них не является ключевым словом либо используется только ключевое слово center, первое значение представляет горизонтальное смещение, а второе — вертикальное.

• Синтаксис с одним значением:
  • Значение должно быть значением <length>, <percentage> или одним из ключевых слов left, center, right, top и bottom.
• Синтаксис с двумя значениями:
  • Одно значение должно быть значением <length>, <percentage> или одним из ключевых слов left, center и right.
  • Другое значение должно быть значением <length>, <percentage> или одним из ключевых слов top, center и bottom.
• Синтаксис с тремя значениями:
  • Первые два значения такие же, как в синтаксисе с двумя значениями.
  • Третье значение должно быть значением <length>. Оно всегда представляет смещение по оси Z.

Значения

смещение по оси x

Значение <length> или <percentage>, определяющее расстояние от левого края блока до начала преобразования.

ключевое слово смещения

Одно из ключевых слов left, right, top, bottom или center, задающее соответствующее смещение.

смещение по оси y

Значение <length> или <percentage>, определяющее расстояние от верхнего края блока до начала преобразования.

ключевое слово смещения по оси x

Одно из ключевых слов left, right или center, определяющее расстояние от левого края блока до начала преобразования.

ключевое слово смещения по оси y

Одно из ключевых слов top, bottom или center, определяющее расстояние от верхнего края блока до начала преобразования.

смещение по оси z

Значение <length> (но не <percentage>, которое сделало бы объявление недопустимым), определяющее расстояние от глаз пользователя до начала координат z=0.

Ключевые слова — это сокращённые варианты записи, которым соответствуют следующие значения <percentage>:

Формальное определение

Формальный синтаксис

transform-origin = 
  [ <length-percentage> | left | center | right | top | bottom ] |
  [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?

<length-percentage> = 
  <length> |
  <percentage>

Примеры

Демонстрация различных значений преобразования

В этом примере показан эффект выбора разных значений transform-origin для различных функций преобразования.

<div class="container">
  <div class="example">
    <div class="box box1">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: none;
  </pre>

  <div class="example">
    <div class="box box2">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: rotate(30deg);
  </pre>

  <div class="example">
    <div class="box box3">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box4">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: 100% 100%;
  </pre>

  <div class="example">
    <div class="box box5">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: rotate(30deg);
transform-origin: -1em -3em;
  </pre>

  <div class="example">
    <div class="box box6">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: scale(1.7);
  </pre>

  <div class="example">
    <div class="box box7">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 0 0;
  </pre>

  <div class="example">
    <div class="box box8">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: scale(1.7);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box9">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: skewX(50deg);
transform-origin: 100% -30%;
  </pre>

  <div class="example">
    <div class="box box10">&nbsp;</div>
    <div class="box original">&nbsp;</div>
  </div>

  <pre>
transform: skewY(50deg);
transform-origin: 100% -30%;
  </pre>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 100px;
  gap: 20px;
}

.example {
  position: relative;
  margin: 0 2em 4em 5em;
}

.box {
  display: inline-block;
  width: 3em;
  height: 3em;
  border: solid 1px;
  background-color: palegreen;
}

.original {
  position: absolute;
  left: 0;
  opacity: 20%;
}

.box1 {
  transform: none;
}

.box2 {
  transform: rotate(30deg);
}

.box3 {
  transform: rotate(30deg);
  transform-origin: 0 0;
}

.box4 {
  transform: rotate(30deg);
  transform-origin: 100% 100%;
}

.box5 {
  transform: rotate(30deg);
  transform-origin: -1em -3em;
}

.box6 {
  transform: scale(1.7);
}

.box7 {
  transform: scale(1.7);
  transform-origin: 0 0;
}

.box8 {
  transform: scale(1.7);
  transform-origin: 100% -30%;
}

.box9 {
  transform: skewX(50deg);
  transform-origin: 100% -30%;
}

.box10 {
  transform: skewY(50deg);
  transform-origin: 100% -30%;
}

Спецификации

Совместимость с браузерами

См. также

• Использование преобразований CSS
• Атрибут SVG transform-origin
• https://css-tricks.com/almanac/properties/t/transform-origin/