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

Свойство transform-origin позволяет изменить точку отсчёта трансформации элемента.

Свойство transform-origin является одним из свойств CSS3.

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

Это свойство можно задать с помощью ключевых слов смещения, значений длины или процентов.

INFO

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

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

Синтаксис

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

css

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

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

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

html

<!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>

Try it Yourself »

Результат

CSS transform-origin

Ещё один пример, демонстрирующий разницу между значениями.

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

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

html

<!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>

Try it Yourself »

Значения

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

Практика

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

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

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

Синтаксис ​

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

Результат ​

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

Значения ​