CSS <transform-function> Data Type

The CSS <transform-function> data type represents a transformation that changes the coordinate system of an element. Transform functions can translate, rotate, scale, skew, or apply perspective to elements in two-dimensional or three-dimensional space.

Syntax

A <transform-function> consists of a transform function name followed by one or more arguments enclosed in parentheses:

translate(40px, 20px)
rotate(45deg)
scale(1.5)
skew(15deg)
perspective(500px)

The arguments required by a transform function depend on the type of transformation being performed.

Transform Functions

CSS provides transform functions for two-dimensional and three-dimensional transformations:

Category	Functions
Translate	`translate()`, `translateX()`, `translateY()`, `translateZ()`, `translate3d()`
Rotate	`rotate()`, `rotateX()`, `rotateY()`, `rotateZ()`, `rotate3d()`
Scale	`scale()`, `scaleX()`, `scaleY()`, `scaleZ()`, `scale3d()`
Skew	`skew()`, `skewX()`, `skewY()`
Matrix	`matrix()`, `matrix3d()`
Perspective	`perspective()`

Translate Functions

Translate functions move an element from its original position without changing the normal document flow.

transform: translate(40px, 20px);
transform: translateX(40px);
transform: translateY(20px);
transform: translateZ(50px);
transform: translate3d(40px, 20px, 50px);

The X and Y translations can use lengths or percentages. Z-axis translations require length values.

Rotate Functions

Rotate functions turn an element around an axis. Two-dimensional rotation uses an angle, while three-dimensional rotation can specify the X, Y, and Z components of a rotation axis.

transform: rotate(45deg);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(1, 1, 0, 45deg);

Scale Functions

Scale functions increase or decrease the apparent size of an element. A value of 1 leaves the size unchanged, values greater than 1 enlarge it, and values between 0 and 1 reduce it.

transform: scale(1.5);
transform: scaleX(1.5);
transform: scaleY(0.75);
transform: scaleZ(2);
transform: scale3d(1.5, 0.75, 2);

Skew Functions

Skew functions slant an element along the X axis, Y axis, or both axes using angle values.

transform: skew(15deg, 5deg);
transform: skewX(15deg);
transform: skewY(5deg);

CSS does not define a three-dimensional skewZ() or skew3d() transform function.

Matrix Functions

The matrix() and matrix3d() functions describe transformations using transformation matrices. They can represent combinations of translation, rotation, scaling, and skewing in a single function.

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

The matrix() function uses six numeric values for a two-dimensional transformation, while matrix3d() uses sixteen values for a three-dimensional transformation.

perspective() Function

The perspective() transform function applies perspective to an element's transformed coordinate system, affecting how three-dimensional transformations appear.

transform: perspective(500px) rotateY(35deg);

Smaller perspective distances generally create a stronger perspective effect, while larger distances produce a more subtle effect.

Multiple Transform Functions

Multiple transform functions can be supplied to the transform property as a space-separated list.

transform: translateX(30px) rotate(15deg) scale(1.1);

Transform functions are composed in the order specified, so changing their order can change the final result.

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

These declarations can produce different results because each transformation changes the coordinate system used by the transformations that follow it.

<transform-function> Example

The following example combines translate(), rotate(), and scale() transform functions:

.transform-example {
  transform: translateX(20px) rotate(8deg) scale(1.1);
}

Browser Result

Transformed Element

The transform list moves the element horizontally, rotates it, and scales it using three <transform-function> values.

The <transform-function> data type is primarily used by the transform property. Related CSS properties control the origin, perspective, and three-dimensional behavior of transformed elements:

Specifications

The <transform-function> data type is defined in the CSS Transforms Module Level 2 .

CSS <transform-function> Data Type