Transform

`transform`: `{ transform-action: value }[]`

Преобразование геометрии блоков и контейнеров в 2D и 3D пространстве.

Преобразование осуществляется через действия transform-actions. Возможно применение нескольких действий к одному блоку одновременно.

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

Доступные `transform-action`:

`rotate`, `rotateX`, `rotateY`, `rotateZ`: `angle`

Поворот вокруг одной из трёх осей. Угол поворота задаётся в градусах с суффиксом "deg" или радианах с суффиксом "rad". Может принимать отрицательные значения.

Действия rotate и rotateZ синонимы.

Не допускается использование нескольких действий группы rotate в одном блоке одновременно.

<box style={{
  transform: [{
    rotate: "-45deg"
  }]
}}>

Действие rotate эквивалентно rotateZ:

transform-1

Действие rotateX:

transform-2

Действие rotateY:

transform-3

`perspective`: `number`

Добавление перспективы к блоку. Перспектива определяется как расстояние по оси Z от пользователя до центра блока. Указывается в пикселях. Чем выше значение, тем менее выражена перспектива.

transform-4

`scale`, `scaleX`, `scaleY`: `number`

Масштабирование по осям X и Y. Указывается коэффициент масштабирования. Может принимать отрицательные значения, что отражает объект по оси зеркально.

Действие scale масштабирует по обеим осям одновременно, тогда как scaleX и scaleY каждая по своей оси.

Масштабирование по обеим осям одновременно:

transform-5

Масштабирование оси X:

transform-6

Масштабирование оси Y:

transform-7

Различное масштабирование осям X и Y:

transform-8

Зеркальное отражение блока:

transform-9

`translateX`, `translateY`: `number`

Смещение блока по осям X и Y. Указывается в пикселях. Может принимать отрицательные значения.

transform-10

`skewX`, `skewY`: `angle`

Искажение блока по осям X или Y. Задаётся в градусах с суффиксом "deg" или радианах с суффиксом "rad". Может принимать отрицательные значения.

Не допускается использование skewX и skewY в одном блоке одновременно. При такой необходимости следует использовать матричное приобразование matrix.

Искажение по оси X:

transform-11