Документация MDN по происхождению трансформации
Свойство «transform-origin» в CSS используется для указания исходной точки преобразований, таких как вращение, масштабирование и наклон. Он определяет точку, вокруг которой применяются преобразования.
В этой статье блога мы рассмотрим различные методы использования свойства «transform-origin», а также приведем примеры кода. Давайте погрузимся!
- Основное использование:
Самый простой способ использования свойства «transform-origin» — указать горизонтальное и вертикальное положение исходной точки. Вот пример:
.element {
transform-origin: 50% 50%;
}В этом случае исходная точка устанавливается в центр элемента.
- Использование ключевых слов.
CSS предоставляет несколько ключевых слов для определения общих позиций в качестве источника преобразования. Эти ключевые слова включают «сверху», «снизу», «слева», «справа», «центр» и их комбинации. Вот пример:
.element {
transform-origin: top left;
}При этом исходная точка устанавливается в верхний левый угол элемента.
- Использование единиц длины.
Вы также можете использовать единицы длины, такие как пиксели (пиксели) или проценты (%), чтобы указать начало преобразования. Вот пример:
.element {
transform-origin: 20px 30px;
}При этом исходная точка устанавливается на расстоянии 20 пикселей слева и 30 пикселей сверху элемента.
- Использование нескольких источников:
Можно определить несколько источников преобразования для разных осей. Вот пример:
.element {
transform-origin: 50% 50% 0;
}В этом случае третье значение (0) определяет исходную точку по оси Z.
- Использование функции Calc():
Функция Calc() позволяет выполнять вычисления для динамического определения источника преобразования. Вот пример:
.element {
transform-origin: calc(50% - 10px) calc(50% + 20px);
}При этом исходная точка вычисляется путем вычитания 10 пикселей из горизонтального центра и добавления 20 пикселей к вертикальному центру.
Используя эти методы, вы можете точно контролировать начало преобразования и достигать желаемых эффектов в преобразованиях CSS.