Safari Developer Library

Developer

WebKitCSSMatrix Class Reference

Options
Deployment Target:

On This Page

WebKitCSSMatrix

WebKitCSSMatrix objects represent a 4x4 homogeneous matrix for 3D transforms or a vector for 2D transforms. You can use these objects to manipulate matrices in JavaScript. For example, you can multiply, translate, and scale matrices.

The values of a 3D matrix can be initialized from the matrix3d transform function returned by window.getComputedStyle(element).webkitTransform(). To apply the final matrix to an element, construct a string using the matrix3d transform function passing the 16 values, and assign it to element.style.webkitTransform. Similarly, you can construct a matrix for 2D transforms by setting 6 values, represented by the a-f properties.

Inheritance


  • WebKitCSSMatrix

Conforms To


Not Applicable

Import Statement


Not Applicable Not Applicable

Availability


Available in Safari 4.0 and later.
Available in iOS 2.0 and later.
  • a Property

    The first 2D vector value.

    Declaration

    JavaScript

    attribute double a

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 3.0 and later.

  • b Property

    The second 2D vector value.

    Declaration

    JavaScript

    attribute double b

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 3.0 and later.

  • c Property

    The third 2D vector value.

    Declaration

    JavaScript

    attribute double c

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 3.0 and later.

  • d Property

    The fourth 2D vector value.

    Declaration

    JavaScript

    attribute double d

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 3.0 and later.

  • e Property

    The fifth 2D vector value.

    Declaration

    JavaScript

    attribute double e

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 3.0 and later.

  • f Property

    The sixth 2D vector value.

    Declaration

    JavaScript

    attribute double f

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 3.0 and later.

  • m11 Property

    The 3D matrix value in the first row and first column.

    Declaration

    JavaScript

    attribute double m11

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m12 Property

    The 3D matrix value in the first row and second column.

    Declaration

    JavaScript

    attribute double m12

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m13 Property

    The 3D matrix value in the first row and third column.

    Declaration

    JavaScript

    attribute double m13

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m14 Property

    The 3D matrix value in the first row and fourth column.

    Declaration

    JavaScript

    attribute double m14

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m21 Property

    The 3D matrix value in the second row and first column.

    Declaration

    JavaScript

    attribute double m21

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m22 Property

    The 3D matrix value in the second row and second column.

    Declaration

    JavaScript

    attribute double m22

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m23 Property

    The 3D matrix value in the second row and third column.

    Declaration

    JavaScript

    attribute double m23

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m24 Property

    The 3D matrix value in the second row and fourth column.

    Declaration

    JavaScript

    attribute double m24

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m31 Property

    The 3D matrix value in the third row and first column.

    Declaration

    JavaScript

    attribute double m31

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m32 Property

    The 3D matrix value in the third row and second column.

    Declaration

    JavaScript

    attribute double m32

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m33 Property

    The 3D matrix value in the third row and third column.

    Declaration

    JavaScript

    attribute double m33

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m34 Property

    The 3D matrix value in the third row and fourth column.

    Declaration

    JavaScript

    attribute double m34

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m41 Property

    The 3D matrix value in the fourth row and first column.

    Declaration

    JavaScript

    attribute double m41

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m42 Property

    The 3D matrix value in the fourth row and second column.

    Declaration

    JavaScript

    attribute double m42

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m43 Property

    The 3D matrix value in the fourth row and third column.

    Declaration

    JavaScript

    attribute double m43

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • m44 Property

    The 3D matrix value in the fourth row and fourth column.

    Declaration

    JavaScript

    attribute double m44

    Discussion

    One of the 16 values for the 4x4 homogeneous matrix. For example, m12 represents the value in the first row and the second column.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • Sets the matrix values using a string representation.

    Declaration

    JavaScript

    void setMatrixValue (in DOMString string);

    Parameters

    string

    A string returned by the matrix3d transform function—typically returned by window.getComputedStyle(element).webkitTransform().

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • Returns the result of multiplying this matrix by a given matrix that is on the right.

    Declaration

    JavaScript

    WebKitCSSMatrix multiply (in WebKitCSSMatrix secondMatrix);

    Parameters

    secondMatrix

    The matrix to multiply.

    Return Value

    A new matrix that is the result of multiplying this matrix by the given matrix.

    Discussion

    The given matrix is on the right of the multiplication. This matrix is not modified by this method.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • Returns the inverse of this matrix.

    Declaration

    JavaScript

    WebKitCSSMatrix inverse ();

    Return Value

    A new matrix that is the inverse of this matrix.

    Discussion

    This matrix is not modified by this method.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • Returns the result of translating this matrix by a given vector.

    Declaration

    JavaScript

    WebKitCSSMatrix translate (in double x, in double y, in double z);

    Parameters

    x

    The x component in the vector.

    y

    The y component in the vector.

    z

    The z component in the vector. If undefined, 0 is used.

    Return Value

    A new matrix that is the result of translating this matrix.

    Discussion

    This matrix is not modified by this method.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • Returns the result of scaling this matrix by a given vector.

    Declaration

    JavaScript

    WebKitCSSMatrix scale (in double scaleX, in double scaleY, in double scaleZ);

    Parameters

    scaleX

    The x component in the vector.

    scaleY

    The y component in the vector. If undefined, the x component is used.

    scaleZ

    The z component in the vector. If undefined, 1 is used.

    Return Value

    A new matrix that is the result of scaling this matrix.

    Discussion

    This matrix is not modified by this method.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • Returns the result of rotating this matrix by a given vector.

    Declaration

    JavaScript

    WebKitCSSMatrix rotate (in double rotX, in double rotY, in double rotZ);

    Parameters

    rotX

    The x component in the vector, in degrees.

    rotY

    The y component in the vector, in degrees. If undefined, the x component is used.

    rotZ

    The z component in the vector, in degrees. If undefined, the x component is used.

    Return Value

    A new matrix that is the result of rotating this matrix by each of the three rotation matrices about the major axes, first the x axes, y axes, and then z axes.

    Discussion

    This matrix is not modified by this method.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • Returns the result of rotating this matrix by a given vector and angle.

    Declaration

    JavaScript

    WebKitCSSMatrix rotateAxisAngle (in double x, in double y, in double z, in double angle);

    Parameters

    x

    The x component in the vector, in degrees.

    y

    The y component in the vector, in degrees. If undefined, the x component is used.

    z

    The z component in the vector, in degrees. If undefined, the x component is used.

    angle

    The angle of rotation about the axis vector, in degrees.

    Return Value

    A new matrix that is the result of rotating this matrix by each of the three rotation matrices about the major axes and angle. The right-hand rule is used to determine the direction of rotation.

    Discussion

    This matrix is not modified by this method.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.

  • Specifies a skew transformation along the x-axis by the given angle.

    Declaration

    JavaScript

    WebKitCSSMatrix skewX (in double angle);

    Parameters

    angle

    The angle amount in degrees to skew.

    Return Value

    A new matrix that is the result of skewing this matrix by the specified angle along the x-axis.

    Availability

    Available in Safari 5.1 and later.

    Available in iOS 5.0 and later.

  • Specifies a skew transformation along the y-axis by the given angle.

    Declaration

    JavaScript

    WebKitCSSMatrix skewY (in double angle);

    Parameters

    angle

    The angle amount in degrees to skew.

    Return Value

    A new matrix that is the result of skewing this matrix by the specified angle along the y-axis.

    Availability

    Available in Safari 5.1 and later.

    Available in iOS 5.0 and later.

  • Returns a string representation of the matrix.

    Declaration

    JavaScript

    DOMString toString ();

    Return Value

    A string representation of the matrix’s values.

    Availability

    Available in Safari 4.0 and later.

    Available in iOS 2.0 and later.