WebKitCSSMatrix Class Reference

Companion guide
Availability
Available in Safari 4.0 and later.
Available in iOS 2.0 and later.

Overview

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.

Tasks

Accessing Properties

Setting the Matrix

Applying Operations

Converting the Matrix

Properties

a

The first 2D vector value.

attribute double a
Availability

b

The second 2D vector value.

attribute double b
Availability

c

The third 2D vector value.

attribute double c
Availability

d

The fourth 2D vector value.

attribute double d
Availability

e

The fifth 2D vector value.

attribute double e
Availability

f

The sixth 2D vector value.

attribute double f
Availability

m11

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

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

m12

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

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

m13

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

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

m14

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

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

m21

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

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

m22

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

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

m23

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

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

m24

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

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

m31

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

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

m32

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

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

m33

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

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

m34

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

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

m41

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

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

m42

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

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

m43

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

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

m44

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

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

Methods

inverse

Returns the inverse of this matrix.

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.

multiply

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

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.

rotate

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

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.

rotateAxisAngle

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

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.

scale

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

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.

setMatrixValue

Sets the matrix values using a string representation.

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.

skewX

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

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.

skewY

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

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.

toString

Returns a string representation of the matrix.

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.

translate

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

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.