Transforms

Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.

Example

---

Reference

Transform

transform accepts an array of transformation objects or space-separated string values. Each object specifies the property that will be transformed as the key, and the value to use in the transformation. Objects should not be combined. Use a single key/value pair per object.

The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). For example:

JavaScript

{
  transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
}

The same could also be achieved using a space-separated string:

JavaScript

{
  transform: 'rotateX(45deg) rotateZ(0.785398rad)',
}

The skew transformations require a string so that the transform may be expressed in degrees (deg). For example:

JavaScript

{
  transform: [{skewX: '45deg'}],
}

Matrix Transform

The matrix transform accepts a 4x4 transformation matrix as an array of 16 numbers. This allows you to apply complex transformations that combine translation, rotation, scaling, and skewing in a single operation.

The matrix is specified in column-major order:

JavaScript

{
  transform: [
    {
      matrix: [