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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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
PropertyThe 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 bywindow.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 doubley
, in doublez
);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 doublescaleY
, in doublescaleZ
);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 doublerotY
, in doublerotZ
);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 doubley
, in doublez
, in doubleangle
);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 righthand 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 xaxis 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 xaxis.
Availability
Available in Safari 5.1 and later.
Available in iOS 5.0 and later.

Specifies a skew transformation along the yaxis 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 yaxis.
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.
Copyright © 2015 Apple Inc. All rights reserved. Terms of Use  Privacy Policy  Updated: 20110614