«Источник преобразования CSS» относится к свойству CSS, которое определяет точку, вокруг которой применяется преобразование CSS. Начало преобразования определяет опорную точку для вращения, масштабирования или перемещения элемента. Вот несколько методов, связанных с происхождением преобразования CSS:
-
Синтаксис CSS. Вы можете установить начало преобразования, используя синтаксис CSS
transform-origin: ось x, ось y, ось z;. Значенияось Xиось Yможно указать в пикселях, процентах или ключевых словах, напримерtop,bottom,слева,справа,центрилиначальный. -
Одно значение: вы можете определить одно значение для источника преобразования, которое применяется как к оси X, так и к оси Y. Например,
transform-origin: 50%;устанавливает начало преобразования в центре элемента по горизонтали и вертикали. -
Два значения: можно указать отдельные значения для осей X и Y. Например,
transform-origin: left top;устанавливает начало преобразования в верхнем левом углу элемента. -
Три значения. Для определения начала преобразования можно использовать три значения, где третье значение представляет ось Z. Это применимо для 3D-преобразований. Например,
transform-origin: left top 0;устанавливает начало преобразования в верхнем левом углу элемента по оси Z. -
Значения ключевых слов. Помимо числовых значений, вы можете использовать ключевые слова для установки источника преобразования. Например,
transform-origin: center center;устанавливает начало преобразования в центре элемента. -
Несколько элементов. Если на странице имеется несколько элементов и вы хотите установить для каждого из них разные источники преобразования, вы можете настроить таргетинг на элементы с помощью селекторов CSS и соответствующим образом применить свойство
transform-origin..