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.

a
PropertyThe first 2D vector value.
Declaration
attribute double a

b
PropertyThe second 2D vector value.
Declaration
attribute double b

c
PropertyThe third 2D vector value.
Declaration
attribute double c

d
PropertyThe fourth 2D vector value.
Declaration
attribute double d

e
PropertyThe fifth 2D vector value.
Declaration
attribute double e

f
PropertyThe sixth 2D vector value.
Declaration
attribute double f

m11
PropertyThe 3D matrix value in the first row and first column.
Declaration
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. 
m12
PropertyThe 3D matrix value in the first row and second column.
Declaration
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. 
m13
PropertyThe 3D matrix value in the first row and third column.
Declaration
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. 
m14
PropertyThe 3D matrix value in the first row and fourth column.
Declaration
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. 
m21
PropertyThe 3D matrix value in the second row and first column.
Declaration
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. 
m22
PropertyThe 3D matrix value in the second row and second column.
Declaration
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. 
m23
PropertyThe 3D matrix value in the second row and third column.
Declaration
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. 
m24
PropertyThe 3D matrix value in the second row and fourth column.
Declaration
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. 
m31
PropertyThe 3D matrix value in the third row and first column.
Declaration
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. 
m32
PropertyThe 3D matrix value in the third row and second column.
Declaration
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. 
m33
PropertyThe 3D matrix value in the third row and third column.
Declaration
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. 
m34
PropertyThe 3D matrix value in the third row and fourth column.
Declaration
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. 
m41
PropertyThe 3D matrix value in the fourth row and first column.
Declaration
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. 
m42
PropertyThe 3D matrix value in the fourth row and second column.
Declaration
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. 
m43
PropertyThe 3D matrix value in the fourth row and third column.
Declaration
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. 
m44
PropertyThe 3D matrix value in the fourth row and fourth column.
Declaration
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.

Sets the matrix values using a string representation.
Declaration
void setMatrixValue (in DOMString
string
);Parameters
string
A string returned by the
matrix3d
transform function—typically returned bywindow.getComputedStyle(element).webkitTransform()
.

Returns the result of multiplying this matrix by a given matrix that is on the right.
Declaration
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.

Returns the inverse of this matrix.
Declaration
WebKitCSSMatrix inverse ();
Return Value
A new matrix that is the inverse of this matrix.
Discussion
This matrix is not modified by this method.

Returns the result of translating this matrix by a given vector.
Declaration
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.

Returns the result of scaling this matrix by a given vector.
Declaration
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.

Returns the result of rotating this matrix by a given vector.
Declaration
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.

Returns the result of rotating this matrix by a given vector and angle.
Declaration
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.

Specifies a skew transformation along the xaxis by the given angle.
Declaration
WebKitCSSMatrixskewX (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.

Specifies a skew transformation along the yaxis by the given angle.
Declaration
WebKitCSSMatrixskewY (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.

Returns a string representation of the matrix.
Declaration
DOMString toString ();
Return Value
A string representation of the matrix’s values.
Copyright © 2016 Apple Inc. All rights reserved. Terms of Use  Privacy Policy  Updated: 20110614