Имитация Transform-Origin с помощью перевода: Подробное руководство

Понимание Transform-Origin

Свойство Transform-origin определяет точка, вокруг которой элемент трансформируется. Установка этого свойства позволяет нам управлять вращением, масштабированием или наклоном элемента с большей точностью.

Имитация Transform-Origin с помощью Translate

Официальная документация по CSS утверждает, что источник преобразования можно смоделировать с помощью преобразования преобразования. Процесс выглядит следующим образом:

• Переведите элемент на отрицательное значение свойства Transform-Origin.
• Примените желаемое преобразование (например, масштабирование, поворот).
• Перевести элемент обратно по значению свойства Transform-origin.

Устранение неполадок с неправильными результатами

Если вы пытаетесь смоделировать Transform-origin с помощью Ошибка перевода, возможно, вы столкнулись с одной из двух распространенных ошибок:

Ошибка 1: неправильный порядок перевода

Имитация преобразования источника включает три операции перевода: начальное отрицание перевод, желаемое преобразование и окончательный положительный перевод. Крайне важно выполнять эти переводы в правильном порядке.

Пример:

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) translate(100px, 100px);
}

В этом примере первоначальный перевод верен, но окончательный перевод должен быть перевода(100px, 100px) вместо перевода(-100px, -100px), чтобы свести на нет первоначальный перевод и восстановить элемент в его исходном виде. исходное положение.

Ошибка 2: несовпадение источника преобразования

Убедитесь, что исходный элемент с источником преобразования и элемент, смоделированный с помощью перевода, имеют одинаковое происхождение источника преобразования. . Transform-origin по умолчанию является центром элемента, и крайне важно либо установить его явно в обоих случаях, либо оставить по умолчанию.

Пример:

.translate {
  transform-origin: 0 0;
  transform: translate(-50px, -50px) rotate(45deg) scale(2) translate(50px, 50px);
}

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

Заключение

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