CSS matrix() Function

CSS matrix() Function

The CSS matrix() function defines a two-dimensional transformation using six numeric values that control scaling, rotation, skewing, and translation.

It is used with the transform property to combine multiple 2D transformations into a single matrix. Although functions such as translate(), rotate(), and scale() are usually easier to read, matrix() provides precise control over the resulting transformation.

Syntax

matrix(a, b, c, d, tx, ty)

The function requires exactly six comma-separated numbers.

For example:

.box {
  transform: matrix(1, 0, 0, 1, 50, 20);
}

This moves the element 50 pixels to the right and 20 pixels down without changing its size or rotation.

Additional examples:

transform: matrix(1, 0, 0, 1, 0, 0);
transform: matrix(2, 0, 0, 2, 0, 0);
transform: matrix(1, 0, 0, 1, 100, 0);
transform: matrix(0, 1, -1, 0, 0, 0);
transform: matrix(1, 0, 0.5, 1, 0, 0);

The function returns a CSS <transform-function> value.

Unlike translate(), the translation arguments in matrix() are unitless numbers interpreted as CSS pixel offsets.

Parameters

Each of the six values controls part of the transformation matrix.

The first four values work together to determine scaling, rotation, skewing, and reflection. Their individual effects depend on the other values.

The final two values specify translation.

For example:

matrix(1, 0, 0, 1, 40, 25)

The first four values preserve the original shape, while the final two move the element 40 pixels right and 25 pixels down.

How It Works

CSS transforms use matrix mathematics to calculate the new positions of points in an element.

The six arguments represent the following transformation matrix:

| a  c  tx |
| b  d  ty |
| 0  0   1 |

For a point with coordinates (x, y), the transformed coordinates are calculated as:

x' = a * x + c * y + tx
y' = b * x + d * y + ty

For example:

matrix(2, 0, 0, 2, 10, 20)

This doubles the x and y coordinates and adds translation offsets of 10 and 20 pixels.

CSS also applies the element's transform-origin when determining the final visual position.

A transformation changes how an element is rendered without changing its original position in normal document flow.

Identity Matrix

The identity matrix preserves an element's original geometry and position.

Its values are:

matrix(1, 0, 0, 1, 0, 0)

For example:

.box {
  transform: matrix(1, 0, 0, 1, 0, 0);
}

This produces no visible transformation.

The identity matrix is useful as a starting point when learning how the six arguments affect an element.

It is also the mathematical identity for combining transformation matrices.

Translation

Translation moves an element horizontally or vertically without changing its dimensions.

For example:

.box {
  transform: matrix(1, 0, 0, 1, 60, 30);
}

This moves the element 60 pixels right and 30 pixels down.

Equivalent CSS:

.box {
  transform: translate(60px, 30px);
}

Negative translation values move the element left or upward:

transform: matrix(1, 0, 0, 1, -40, -20);

The translation values in a matrix are always unitless numbers representing CSS pixels. They cannot directly use percentages or relative units such as em.

Scaling

Scaling changes the apparent width and height of an element.

For scaling without rotation or skewing, the matrix uses:

matrix(scaleX, 0, 0, scaleY, 0, 0)

For example:

.box {
  transform: matrix(1.5, 0, 0, 1.5, 0, 0);
}

This increases both dimensions to 150% of their original size.

Equivalent CSS:

.box {
  transform: scale(1.5);
}

Different horizontal and vertical scales are also possible:

transform: matrix(2, 0, 0, 0.5, 0, 0);

This doubles the width and reduces the height to 50%.

Negative scaling values can reflect an element across an axis.

Rotation

Rotation turns an element around its transform origin.

A rotation matrix uses sine and cosine values:

matrix(cos(angle), sin(angle), -sin(angle), cos(angle), 0, 0)

For a 90-degree clockwise rotation:

.box {
  transform: matrix(0, 1, -1, 0, 0, 0);
}

Equivalent CSS:

.box {
  transform: rotate(90deg);
}

For a 45-degree clockwise rotation, the approximate matrix is:

transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0);

Using rotate() is generally easier to read because the angle can be specified directly.

Matrix rotation values are useful when working with transformations generated by scripts, design tools, or other mathematical calculations.

Skewing

Skewing slants an element by shifting coordinates along an axis.

For a horizontal skew:

.box {
  transform: matrix(1, 0, 0.5, 1, 0, 0);
}

This shifts x-coordinates according to the original y-coordinate.

The equivalent skew angle is approximately 26.565 degrees:

.box {
  transform: skewX(26.565deg);
}

For a vertical skew:

transform: matrix(1, 0.5, 0, 1, 0, 0);

Equivalent CSS:

transform: skewY(26.565deg);

Both skew components can be included in the same matrix.

The matrix coefficients represent the tangent of the corresponding skew angles, not the angles themselves.

Combined Transformations

The matrix() function can represent several transformations at once.

For example:

.box {
  transform: matrix(1.2, 0.2, -0.3, 1.1, 40, 20);
}

This combines a change in scale and orientation with horizontal and vertical translation.

The first four coefficients work together to define the transformed axes, while the last two values determine the translation offsets.

Matrix multiplication combines individual transformations into a single result.

Because transformation order affects the result, the following declarations generally produce different transformations:

transform: translateX(50px) rotate(30deg);
transform: rotate(30deg) translateX(50px);

CSS transform functions are composed in their specified order, with the resulting operations applied to points from right to left.

A matrix can represent the combined result, but its coefficients must be calculated correctly for the intended order.

Transform Origin

The transform-origin property determines the point around which a transformation is applied.

By default, a typical HTML element transforms around its center.

For example:

.box {
  transform-origin: center;
  transform: matrix(0, 1, -1, 0, 0, 0);
}

This rotates the element 90 degrees around its center.

Changing the origin affects the visible result:

.box {
  transform-origin: top left;
  transform: matrix(0, 1, -1, 0, 0, 0);
}

Now the element rotates around its upper-left corner.

Translation itself is not affected by changing the transform origin, but rotation, scaling, and skewing generally are.

Understanding the transform origin is important when a mathematically correct matrix produces an unexpected visual position.

matrix() vs. Other Transform Functions

The matrix() function can represent transformations normally written with simpler functions.

For most everyday CSS work, individual transform functions are easier to understand and maintain.

The matrix form is useful when a transformation has already been calculated or when precise control over the coefficients is required.

matrix() vs. matrix3d()

The matrix() and matrix3d() functions both represent transformations using matrices, but they operate in different dimensional spaces.

For example:

transform: matrix(1, 0, 0, 1, 50, 20);

This performs a 2D translation.

The equivalent 3D matrix representation is:

transform: matrix3d(
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  50, 20, 0, 1
);

Use matrix() for two-dimensional transformations and matrix3d() when a three-dimensional transformation matrix is needed.

Example

This example compares an unchanged element with an element translated using matrix().

HTML:

<div class="matrix-demo">
  <div class="matrix-demo-item">
    <span>Original</span>
    <div class="matrix-demo-stage">
      <div class="matrix-demo-box">Box</div>
    </div>
  </div>
  <div class="matrix-demo-item">
    <span>matrix(1, 0, 0, 1, 40, 20)</span>
    <div class="matrix-demo-stage">
      <div class="matrix-demo-box matrix-demo-translated">Box</div>
    </div>
  </div>
</div>

CSS:

.matrix-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.matrix-demo-item {
  min-width: 0;
}
.matrix-demo-item span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
}
.matrix-demo-stage {
  height: 140px;
  padding: 15px;
  background-color: #f1f3f5;
  border: 1px solid #dddddd;
  overflow: hidden;
}
.matrix-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 50px;
  background-color: #0066cc;
  color: #ffffff;
  font-size: 13px;
}
.matrix-demo-translated {
  transform: matrix(1, 0, 0, 1, 40, 20);
}

The second box moves 40 pixels to the right and 20 pixels down. Its original dimensions remain unchanged.

Combined Transformation Example

This example demonstrates how a matrix can combine scaling and translation.

HTML:

<div class="matrix-combined-demo">
  <div class="matrix-combined-box">Transform</div>
</div>

CSS:

.matrix-combined-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  background-color: #f1f3f5;
  overflow: hidden;
}
.matrix-combined-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 60px;
  background-color: #0066cc;
  color: #ffffff;
  border-radius: 4px;
  font-size: 13px;
  transform: matrix(1.2, 0, 0, 1.2, 30, 10);
}

The element is scaled to 120% of its original size and translated 30 pixels right and 10 pixels down.

Because scaling occurs around the default transform origin, the visible edges expand outward from the center.

Common Uses

The matrix() function is useful when transformations need to be represented as a single mathematical operation.

For example:

.element {
  transform: matrix(1, 0.2, -0.2, 1, 20, 10);
}

This applies a combined 2D transformation using one matrix.

For simple effects, individual functions such as translate(), rotate(), and scale() are generally easier to maintain.

Limitations

The matrix() function has several important rules and limitations.

• Exactly six arguments are required.
• All six arguments must be numbers without CSS units.
• The translation arguments represent CSS pixel offsets.
• The function represents 2D transformations, not full 3D transformations.
• Transformation order affects the resulting matrix.
• Scaling, rotation, and skewing coefficients can be difficult to calculate manually.
• Matrix coefficients are less readable than individual transform functions.
• Transforms affect visual rendering but do not reposition surrounding elements in normal document flow.
• Transforms can affect stacking contexts and the containing blocks of positioned descendants.
• A matrix with zero scale along an axis can make an element visually collapse.

For example, this is valid:

transform: matrix(1, 0, 0, 1, 50, 20);

The following is invalid because it contains only five arguments:

transform: matrix(1, 0, 0, 1, 50);

The following is invalid because the translation arguments include units:

transform: matrix(1, 0, 0, 1, 50px, 20px);

Use translate() when translation values require lengths or percentages rather than unitless matrix arguments.

Browser Support

The CSS matrix() function is Baseline Widely available and has been supported across major browser engines for many years.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support the function.

For example:

.box {
  transform: matrix(1, 0, 0, 1, 50, 20);
}

Very old browsers may require vendor-prefixed transform declarations, but prefixes are unnecessary in modern browsers.

For current compatibility information, visit Can I Use? and search for CSS transforms.

Specifications

The matrix() function is defined in the CSS Transforms Module Level 1 .

The specification defines the matrix arguments, transformation mathematics, and their relationship to other 2D transform functions.

Related CSS transform functions include matrix3d(), translate(), scale(), rotate(), and skew().