CSS Transform Origin - изменяйте точку преобразования элементов

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

Вот примеры, которые демонстрируют использование свойства transform-origin с различными значениями:

1. Использование одной координаты:

.box {
  transform-origin: 50%;
  /* Применение трансформации */
  transform: rotate(45deg);
}

В этом примере мы устанавливаем `transform-origin` в 50% (по горизонтали) и не устанавливаем значение по вертикали. Когда мы применяем вращение (`rotate`), элемент будет вращаться относительно своей горизонтальной середины.

2. Использование двух координат:

.box {
  transform-origin: top right;
  /* Применение трансформации */
  transform: scale(2);
}

В этом примере мы устанавливаем `transform-origin` в `top right`, что означает, что трансформации будут применяться относительно верхнего края и правого края элемента. Когда мы применяем масштабирование (`scale`), элемент будет увеличиваться в размере вдоль верхнего и правого края.

3. Использование процентов и пикселей:

.box {
  transform-origin: 50% 100px;
  /* Применение трансформации */
  transform: skewX(45deg);
}

В этом примере мы устанавливаем `transform-origin` в 50% по горизонтали и 100 пикселей по вертикали. Когда мы применяем наклон (`skewX`), элемент будет наклоняться вдоль его горизонтальной середины, но точка трансформации будет находиться на расстоянии 100 пикселей от верхнего края.

Надеюсь, эти примеры помогли вам понять, как использовать свойство transform-origin в CSS.