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

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

По умолчанию любая трансформация происходит вокруг центра элемента (50% 50%). При повороте блок вращается вокруг своей середины; при масштабировании он равномерно увеличивается во все стороны. transform-origin позволяет переместить эту точку в любое место — в угол, на грань или даже за пределы блока — и тогда та же трансформация создаст совершенно иное движение.

На этой странице рассматриваются синтаксис, поведение ключевых слов, процентных и длинных значений, необязательное значение по оси z для 3D, а также рабочие примеры, которые можно запустить.

Почему transform-origin важен

Поворот выглядит совершенно по-разному в зависимости от расположения точки вращения. Представьте стрелку часов: если вращать её вокруг центра, она описывает небольшой круг, а если вокруг основания — кончик стрелки проходит по всему циферблату. То же rotate(), но другой origin.

Именно поэтому transform-origin незаменим для:

Движения на шарнире или как у двери — вращение вокруг грани, а не центра.
Масштабирования из угла — меню раскрывается из верхнего левого угла, а не из середины.
3D-переворотов карточек — в сочетании со смещением по оси z и perspective.

Свойство transform-origin оказывает эффект только тогда, когда к элементу применяется функция трансформации через свойство transform — само по себе оно ничего не делает. Это одно из свойств CSS3.

Синтаксис в кратком изложении

Значение можно задать с помощью:

Ключевых слов смещения — left, center, right, top, bottom (например, top left).
Длин — отсчитывается от верхнего левого угла элемента (например, 0 0, 80px 40px).
Процентов — относительно собственного размера элемента (например, 0% 0% — верхний левый угол, 100% 100% — нижний правый).

Если задано только одно значение, второе по умолчанию равно center. Третье значение задаёт позицию по оси z и имеет значение только для 3D-трансформаций.

Информация

Исторически префикс -webkit- использовался для Safari, Chrome и более старых версий Opera. Современные браузеры больше не требуют вендорных префиксов для этого свойства.

Начальное значение	50% 50% 0
Применяется к	Трансформируемым элементам.
Наследуется	Нет.
Анимируется	Да. Степень анимируема.
Версия	CSS3
Синтаксис DOM	Object.style.transform-origin = "10% 30%";

Синтаксис

Значения CSS transform-origin

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

Пример свойства transform-origin:

Пример кода CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .big {
        position: relative;
        height: 300px;
        width: 300px;
        margin: 80px;
        padding: 5px;
        border: 2px solid #666666;
        background-color: #eeeeee;
      }
      .little {
        padding: 60px;
        position: absolute;
        border: 2px solid #666666;
        background-color: #8ebf42;
        -webkit-transform: rotate(35deg);
        -webkit-transform-origin: 70% 90%;
        transform: rotate(35deg);
        transform-origin: 70% 90%;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="big">
      <div class="little">Box</div>
    </div>
  </body>
</html>

Попробуйте сами »

Результат

Маленький блок повёрнут на 35°, но поскольку transform-origin равен 70% 90% (нижняя правая область), вращение происходит вокруг этой точки, а не вокруг центра.

В следующем примере четыре одинаковых блока поворачиваются на одинаковые 25deg, и меняется только transform-origin — это позволяет наглядно увидеть, как каждое значение смещает точку вращения.

Пример transform-origin с четырьмя значениями:

Ещё один пример кода CSS transform-origin

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eeeeee;
        font-size: 1.1em;
        font-family: 'Roboto', Helvetica, sans-serif;
      }
      .container {
        margin: 10px auto;
        max-width: 700px;
      }
      .wrap {
        width: 150px;
        height: 150px;
        border: 2px solid #666666;
        display: inline-block;
        margin: 100px;
      }
      .box {
        width: 150px;
        height: 150px;
        position: relative;
        color: #eeeeee;
        text-align: center;
        line-height: 150px;
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
      }
      .a {
        background-color: #0747af;
      }
      .b {
        background-color: #40b530;
        -webkit-transform-origin: top left;
        transform-origin: top left;
      }
      .c {
        background-color: #666666;
        -webkit-transform-origin: 90% 120%;
        transform-origin: 90% 120%;
      }
      .d {
        background-color: #ffdb11;
        -webkit-transform-origin: 80px 40px;
        transform-origin: 80px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Transform-origin property example</h2>
    <div class="container">
      <div class="wrap">
        <div class="box a">
          50% 50%
        </div>
      </div>
      <div class="wrap">
        <div class="box b">
          top left
        </div>
      </div>
      <div class="wrap">
        <div class="box c">
          90% 120%
        </div>
      </div>
      <div class="wrap">
        <div class="box d">
          80px 40px
        </div>
      </div>
    </div>
  </body>
</html>

Попробуйте сами »

Читая четыре блока: 50% 50% вращается вокруг центра, top left — вокруг верхнего левого угла, 90% 120% использует точку ниже и правее блока, а 80px 40px задаёт точку вращения в пикселях от верхнего левого угла.

Смещение по оси z для 3D-трансформаций

Третье значение перемещает точку вращения вдоль оси z (к зрителю или от него). Оно оказывает видимый эффект только с 3D-функциями трансформации, такими как rotateX() или rotateY(), и должно быть задано в единицах длины — проценты для значения z не допускаются.

.card {
  /* pivot at the center, pushed 50px toward the viewer */
  transform: rotateY(45deg);
  transform-origin: center center 50px;
}

Чтобы 3D-эффект был виден, родительский элемент обычно должен иметь значение perspective (а точку схода можно сместить с помощью perspective-origin).

Значения

Значение	Описание
`x-offset`	Задаёт горизонтальную позицию. Принимает ключевые слова (`left`, `center`, `right`), длины или проценты.
`y-offset`	Задаёт вертикальную позицию. Принимает ключевые слова (`top`, `center`, `bottom`), длины или проценты.
`z-offset`	Задаёт позицию глубины вдоль оси z для 3D-трансформаций. Принимает значения длины.
`initial`	Устанавливает свойство в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Советы и подводные камни

Само по себе не работает. Если transform-origin не оказывает видимого эффекта, убедитесь, что у элемента также задано свойство transform — без него нет ничего, вокруг чего можно было бы вращаться.
Проценты рассчитываются относительно самого элемента, а не его родителя: 100% 0% — это верхний правый угол самого элемента.
Порядок: x, затем y, поэтому top left и left top равнозначны (ключевые слова не зависят от порядка), но 0% 100% (нижний левый) и 100% 0% (верхний правый) — нет.
Для плавной анимации анимируйте трансформации, а не origin. Изменение transform-origin в середине анимации заставляет элемент прыгать, поэтому задайте origin один раз и анимируйте transition или animation для transform.

Связанные свойства

transform — применяет поворот, масштабирование, наклон или смещение, вокруг которых работает origin.
perspective и perspective-origin — необходимы для отображения origin по оси z в 3D.
transition и animation — анимируют трансформации во времени.

Практика

Свойство transform-origin работает только с

анимируемыми элементами.трансформируемыми элементами.позиционированными элементами.