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:

Действие rotateX:

Действие rotateY:

perspective: number

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

scale, scaleX, scaleY: number

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

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

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

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

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

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

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

translateX, translateY: number

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

skewX, skewY: angle

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

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

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

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

matrix: [number, number, number, number, number, number]

Матричное преобразование блока. По сути комбинация трёх разных преобразований: scale, skew и transform.

Параметры идут в следующем порядке: [ scaleX, skewY, skewX, scaleY, translateX, translateY ]

Для параметров skewX и skewY указывается число как значение угла в радианах.

Масштабирование блока scale:

Искажение блока skew:

Смещение блока translate:

Все три преобразования вместе: