# WebKitCSSMatrix Class Reference

## 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.

## Properties

### a

The first 2D vector value.

`attribute double a`

##### Availability

- Available in Safari 4.0 and later.
- Available in iOS 3.0 and later.

### b

The second 2D vector value.

`attribute double b`

##### Availability

- Available in Safari 4.0 and later.
- Available in iOS 3.0 and later.

### c

The third 2D vector value.

`attribute double c`

##### Availability

- Available in Safari 4.0 and later.
- Available in iOS 3.0 and later.

### d

The fourth 2D vector value.

`attribute double d`

##### Availability

- Available in Safari 4.0 and later.
- Available in iOS 3.0 and later.

### e

The fifth 2D vector value.

`attribute double e`

##### Availability

- Available in Safari 4.0 and later.
- Available in iOS 3.0 and later.

### f

The sixth 2D vector value.

`attribute double f`

##### Availability

- Available in Safari 4.0 and later.
- Available in iOS 3.0 and later.

### 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

- Available in Safari 4.0 and later.
- Available in iOS 2.0 and later.

### 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

- Available in Safari 4.0 and later.
- Available in iOS 2.0 and later.

### 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

- Available in Safari 4.0 and later.
- Available in iOS 2.0 and later.

### m14

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

`attribute double m14`

##### Discussion

`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

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

`attribute double m21`

##### Discussion

`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

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

`attribute double m22`

##### Discussion

`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

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

`attribute double m23`

##### Discussion

`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

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

`attribute double m24`

##### Discussion

`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

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

`attribute double m31`

##### Discussion

`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

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

`attribute double m32`

##### Discussion

`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

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

`attribute double m33`

##### Discussion

`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

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

`attribute double m34`

##### Discussion

`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

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

`attribute double m41`

##### Discussion

`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

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

`attribute double m42`

##### Discussion

`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

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

`attribute double m43`

##### Discussion

`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

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

`attribute double m44`

##### Discussion

`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.

## Methods

### inverse

Returns the inverse of this matrix.

##### 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.

*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.

*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.

*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.

*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.

*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.

*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.

*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.

##### 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.

*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.

Copyright © 2011 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2011-06-14