Transform

transform: { transform-action: value }[]

Transformation of the geometry of blocks and containers in 2D and 3D space.

The transformation is carried out through transform-actions. It is possible to apply multiple actions to a single block simultaneously.

It is important to understand that the transformation applies only to the display geometry of blocks and containers. It is applied after the final placement of blocks and containers on the screen, and therefore does not affect the relationships between them.

Available transform-action:

rotate, rotateX, rotateY, rotateZ: angle

Rotation around one of the three axes. The angle of rotation is specified in degrees with the suffix "deg" or in radians with the suffix "rad". It can take negative values.

The actions rotate and rotateZ are synonyms.

Using multiple actions from the rotate group in a single block simultaneously is not allowed.

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

The action rotate is equivalent to rotateZ:

The action rotateX:

The action rotateY:

perspective: number

Adding perspective to the block. Perspective is defined as the distance along the Z-axis from the user to the center of the block. It is specified in pixels. The higher the value, the less pronounced the perspective.

scale, scaleX, scaleY: number

Scaling along the X and Y axes. A scaling factor is specified. It can take negative values, which reflects the object across the axis.

The action scale scales along both axes simultaneously, while scaleX and scaleY scale along their respective axes.

Scaling along both axes simultaneously:

Scaling along the X axis:

Scaling along the Y axis:

Different scaling for the X and Y axes:

Mirroring the block:

translateX, translateY: number

Shifting the block along the X and Y axes. Specified in pixels. It can take negative values.

skewX, skewY: angle

Distortion of the block along the X or Y axes. Specified in degrees with the suffix "deg" or in radians with the suffix "rad". It can take negative values.

Using skewX and skewY in a single block simultaneously is not allowed. If necessary, matrix transformation matrix should be used.

Distortion along the X axis:

Distortion along the Y axis:

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

Matrix transformation of the block. Essentially a combination of three different transformations: scale, skew, and transform.

The parameters are in the following order: [ scaleX, skewY, skewX, scaleY, translateX, translateY ]

For the parameters skewX and skewY, a number is specified as the angle value in radians.

Scaling the block scale:

Distortion of the block skew:

Shifting the block translate:

All three transformations together: