CSS <transform-function> data type

This article demonstrates the CSS <transform-function> data type, and its values, and using the data type with the transform property. Included are definitions.

The <transform-function> CSS data type represents a transformation of an HTML element. The transformation can be of 2D or 3D and can scale, translate, skew, and rotate the element within either of the 2D or 3D dimensions. The <transform-function> is used with the transform property.

Transform functions can be applied together with the resulting effect of each transform function applied in the order provided. Addionally when strung together as multiple values, the <transform-functions> become a <transform-list>.

<transform-function> = matrix() | matrix3d() | perspective() | rotate() | rotate3d() | rotateX() | rotateY() | rotateZ() | translate() | translate3d() | translateX() | translateY() | translateZ() | scale() | scale3d() | scaleX() | scaleY() | scaleZ() | skew() | skewX() | skewY()

Syntax

transform: <transform-function> | <transform-list> ;

A transform function can be used by supplying one or more of the 2D or 3D geometric transformation functions below. For example, transform: scale(2); or transform: rotateX(90deg) translateY(5px);.

2D Transform Functions

• matrix()

The matrix value is a function that defines a 2D transformation, and it uses a matrix of six values.

• translate()

The translate value is a function that defines a 2D translation.

• translateX()

The translateX value is a function that defines an element’s translation, and it uses the value for the X-axis.

• translateY()

The translateY value is a function that defines a translation of an element, and it uses only the value for the Y-axis.

• scale()

The scale value is a function that defines a 2D scale transformation.

• scaleX()

The scaleX value is a function that defines a scale transformation whose values are for the X-axis.

• scaleY()

The scaleY value is a function that defines a scale transformation whose values are for the Y-axis.

• rotate()

The rotate value is a function that defines a 2D rotation. The angle is stated in the parameter.

• skew()

The skew value is a function that defines a 2D skew transformation along the X-axis and Y-axis.

• skewX()

The skewX value is a function that defines a 2D skew transformation along the X-axis.

• skewY()

The skewY value is a function that defines a 2D skew transformation along the Y-axis.

2D Transform function primitives and derivatives

Some functions can be represented by a more simple transform function. These simpler functions are called primitive transform functions and the functions derived from the primitive functions are called derived transform functions. Two-dimensional primitives and their derived transform functions are:

• translate() -> (primitive)
  • translateX() -> (derived)
  • translateY() -> (derived)
• scale() (primitive)
  • scaleY() -> (derived)
  • scaleX() -> (derived)

3D Transform Functions

• matrix3d()

The matrix3d value is a function that defines a 3D transformation of an element using a 4×4 matrix of 16 different values.

• translate3d()

The translate3d value is a function that defines a 3D translation.

• translateZ()

The translateZ value is a function that defines a 3D translation of an element but only uses the value for the Z-axis.

• scale3d()

The scale3d value is a function that defines a 3D scale transformation.

• scaleZ()

The scaleX value is a function that defines a 3D scale transformation by giving a value for the Z-axis.

• rotate3d()

The rotate3d value is a function that defines a 3D rotation.

• rotateX()

The rotateX value is a function that defines a 3D rotation along the element’s X-axis.

• rotateY()

The rotateY value is a function that defines a 3D rotation along the element’s Y-axis.

• rotateZ()

The rotateX value is a function that defines a 3D rotation along the Y-axis.

• perspective()

The perspective value is a function that defines a perspective view for a 3D transformation.

3D Transform function primitives and derivatives

Some functions can be represented by a more simple transform function. These simpler functions are called primitive transform functions and the functions derived from the primitive functions are called derived transform functions. Three-dimensional primitives and their derived transform functions are:

• translate3d() -> (primitive)
  • translate() -> (derived)
  • translateY() -> (derived)
  • translateX() -> (derived)
  • translateZ() -> (derived)
• scale3d() -> (primitive)
  • scale() -> (derived)
  • scaleY() -> (derived)
  • scaleX() -> (derived)
  • scaleZ() -> (derived)
• rotate3d() -> (primitive)
  • rotate() -> (derived)
  • rotateY() -> (derived)
  • rotateX() -> (derived)
  • rotateZ() -> (derived)

Specifications

W3C CSS Transforms Module Level 1
#transform-functions

W3C CSS Transforms Module Level 2
#transform-functions

See Also

• CSS transform Property