Трансформации

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

Существует 4 типа трансформаций:

  • Движение (Move)

  • Масштабирование (Scale)

  • Поворот (Rotate)

  • Наклон (Skew)

Добавление трансформаций

Трансформации можно добавить на вкладке Стилей правой панели в разделе Внешний вид. Для добавления трансформации кликните на кнопку “+” справа от названия эффекта Трансформация (Transform).

Добавить трансформацию

По умолчанию добавится трансформация типа Поворот (Rotate). Вы можете изменить тип трансформации, кликнув на выпадающий список.

Изменить тип трансформации

Чтобы открыть настройки трансформации, нажмите на иконку слева от ее названия.

Открыть настройки трансформации

Настройки трансформации

В настройках также можно изменить тип трансформации. Для этого кликните на иконку нужного типа трансформации.

Изменить тип трансформации

Элементу можно добавить более одной трансформации. Для добавления используйте значок "+".

Типы трансформаций

Движение (Move)

Трансформация Движение

С помощью трансформации Движения можно изменять положение элемента влево и вправо по горизонтальной оси (X) или вверх и вниз по вертикальной оси (Y), используя положительные и отрицательные значения. Сдвиг по обеим осям перемещает элемент по диагонали.

Перемещение элемента вдоль оси Z изменяет воспринимаемую глубину элемента. Но эффекта не будет, если не установить дочернюю перспективу для родительского элемента (в общих настройках трансформаций).

Единицей измерения значений по умолчанию являются пиксели (px). Можно изменить единицу измерения, выбрав ее из выпадающего списка (px, %, em, rem , vw, vh).

Сдвиг кнопки при наведении - параметры Y: 10px

Масштабирование (Scale)

Трансформация Масштабирование

Трансформация Масштабирования приводит к тому, что элемент становится больше, если значение больше 1, или меньше, если оно находится между 0 и 1. Можно связать оба значения X и Y, чтобы элемент масштабировался пропорционально. Чтобы редактировать каждое значение независимо, нужно отключить связь между значениями X и Y, щелкнув значок блокировки.

Масштабирования кнопки при наведении - параметры X: 1.15, Y: 1.15

Поворот (Rotate)

Трансформация Поворот

Чтобы повернуть элемент по осям X и Y, задайте положительное или отрицательное значение в градусах (deg). Градусы являются единицей измерения по умолчанию, вы можете изменить их на другие единицы, выбрав их из выпадающего списка.

Для поворота с эффектом 3D необходимо задать значение перспективы дочерних элементов на родительском элементе. Чтобы повернуть элемент по часовой стрелке или против часовой стрелки, нужно повернуть его вдоль оси Z.

Поворот кнопки при наведении - параметры X: -20deg, Y: 20deg

Наклон (Skew)

Трансформация Наклон

С помощью этой трансформации можно настроить наклон элемента вдоль оси X или Y. Применение перспективы к родительскому элементу не влияет на трансформацию Наклона.

Наклон кнопки при наведении - параметры X: -10deg

Настройки трансформаций (Transform settings)

Чтобы открыть общие настройки трансформаций, кликните на многоточие справа от названия Трансформация.

Переход к настройкам трансформаций

Общие настройки трансформаций

Настройки трансформаций влияют на все трансформации, применяемые к элементу.

Исходное положение (Origin)

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

Также можно вручную настроить позиционирование, введя значения для горизонтального и вертикального положения. По умолчанию единица измерения значения — пиксели, ее можно изменить на %, em, rem, vw, vh.

Например, если переместить начало координат в правый нижний угол, преобразования начнутся с этого местоположения. Этот параметр влияет только на трансформации Масштабирования и Поворота.

Видимость задней поверхности (Backface)

Backface позволяет задать видимость обратной стороны элемента. По умолчанию, при повороте элемента на 180° вдоль оси X или Y, он выглядит перевернутым, как если бы вы смотрели на него сзади. Любое текстовое содержимое внутри элемента будет выглядеть перевернутым, как будто его держат напротив зеркала. Можно выбрать свойства "Видимая" или "Скрытая" для задней поверхности.

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

Перспектива дочерних элементов (Children perspective)

Установка для родительского элемента перспективы дочерних элементов создает для них реалистичный 3D-эффект. Эти настройки 3D будут применяться к трансформациям, установленным для дочерних элементов.

Перспектива задается параметром Расстояние (Distance), которое определяет, интенсивность 3D эффекта. По умолчанию Расстояние имеет значение none, может задаваться в пикселях px, em, rem, vw, vh. Чаще всего достаточно ввести расстояние перспективы в диапазоне от 400 до 1000 пикселей.

Трансформации с плавным переходом

При создании трансформаций для разных состояний элемента рекомендуется добавлять эффект Перехода (Transition), чтобы взаимодействие было плавным. Например, добавив элементу трансформацию при наведении курсора, вы получите резкое переключение эффекта при наведении. Добавьте Переход, чтобы эффект трансформации срабатывал плавно. Это можно сделать в разделы Внешний вид, нажав “+” рядом с параметром Переходы (Transitions).

Добавить переход