CSS -webkit-transform

The CSS -webkit-transform property enables web authors to transform an element in two-dimensional (2D) or three-dimensional (3D) space. For example, you can rotate elements, scale them, skew them, and more.

Demo

The -webkit-transform property accepts a list of "transform functions" as values. These transform functions have names such as scale(), rotate(), skew(), etc, which accept parameters to determine the level of transformation (for example, the angle to rotate an element).

The CSS -webkit-transform property is a proprietary CSS extension that is supported by the WebKit browser engine. WebKit extensions contain the -webkit- prefix, which indicates that it belongs to the WebKit open source framework.

Although the -webkit-transform property is not part of the official W3C CSS specification, it is designed to work on browsers that are powered by the WebKit browser engine, such as Apple Safari and Google Chrome.

Syntax

The syntax for the -webkit-transform property is:

Where <function> represents one of the transform functions listed below under Accepted Values.

Example Code

Here's an example of usage (note that this example also includes other proprietary extensions):

Accepted Values

Here are the accepted values for the -webkit-transform property:

none
Specifies that no transforms should be applied to the element. This is the default value.
transform function
One or more of the transform functions below.

Transform Functions

Here is a list of transform functions that you can use with the -webkit-transform property.

Transform Function Description
matrix() Specifies a 2D transformation in the form of a transformation matrix of six values.

Syntax: -webkit-transform: matrix(m11, m12, m21, m22, tX, tY)

The parameters m11, m12, m21, m22 represent the elements of a 2x2 matrix in column-major order:

1,12,1
1,22,2

The parameters tX, tY represent the x and y translation elements.

Example: -webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);

The matrix() transform function is available on the following:

  • Safari 3.1 and later.
  • iOS 2.0 and later.
  • Google Chrome 1.0 and later.
matrix3d() Specifies a 3D transformation as a 4 x 4 matrix.

Syntax: -webkit-transform: matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33)

The parameters represent a 4x4 homogeneous matrix of 16 values in column-major order:

0,01,02,03,0
0,11,12,13,1
0,21,22,23,2
0,31,32,33,3

The matrix3d() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
perspective() Specifies a perspective projection matrix.

Syntax: -webkit-transform: perspective(depth)

Where depth equals the distance, in pixels, of the z=0 plane from the viewer.

This function allows you to change the perspective of an element by changing the distance of the element to the viewer. Therefore, a smaller value would increase the "perspective" effect (due to the object appearing closer), while a larger value will reduce the effect (due to the element appearing further away).

The perspective() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
rotate() Specifies a 2D rotation clockwise around the element's origin.

Syntax: -webkit-transform: rotate(angle)

Where angle is an angle represented by deg, rad or grad units. For example, rotate(40deg)

The operation corresponds to the matrix [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0].

The rotate() transform function is available on the following:

  • Safari 3.1 and later.
  • iOS 2.0 and later.
  • Google Chrome 1.0 and later.
rotate3d() Specifies a 3D rotation.

Syntax: -webkit-transform: rotate3d(x, y, z, angle)

Where

  • x, y, z represents the [x,y,z] direction vector for the rotation.
  • angle is an angle represented by deg, rad or grad units.

The rotate3d() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
rotateX() Rotates the element clockwise around the x-axis.

Syntax: -webkit-transform: rotateX(angle)

Where angle is an angle represented by deg, rad or grad units. For example, rotateX(40deg)

The rotateX() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
rotateY() Rotates the element clockwise around the y-axis.

Syntax: -webkit-transform: rotateY(angle)

Where angle is an angle represented by deg, rad or grad units. For example, rotateY(40deg)

The rotateY() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
rotateZ() Rotates the element clockwise around the x-axis.

Syntax: -webkit-transform: rotateZ(angle)

Where angle is an angle represented by deg, rad or grad units. For example, rotateZ(40deg)

The rotateZ() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
scale() Scales the element (i.e. changes its size) in 2D.

Syntax: -webkit-transform: scale(scaleX [, scaleY])

Where scaleX represents how much the element should be scaled in the x direction, and scaleY represents the y direction. For example, scale(2,3)

The scale() transform function is available on the following:

  • Safari 3.1 and later.
  • iOS 2.0 and later.
  • Google Chrome 1.0 and later.
scale3d() Scales the element (i.e. changes its size) in 3D.

Syntax: -webkit-transform: scale3d(scaleX, scaleY, scaleZ)

Where scaleX represents how much the element should be scaled in the x direction, scaleY represents the y direction, and scaleZ represents the z direction. For example, scale3d(2,3,3)

The scale3d() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
scaleX() Scales the element (i.e. changes its size) in the x direction.

Syntax: -webkit-transform: scaleX(sx)

Where sx represents how much the element should be scaled in the x direction. For example, scaleX(2.1)

The scaleX() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
scaleY() Scales the element (i.e. changes its size) in the x direction.

Syntax: -webkit-transform: scaleY(sy)

Where sy represents how much the element should be scaled in the y direction. For example, scaleY(0.6)

The scaleY() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
scaleZ() Scales the element (i.e. changes its size) in the x direction.

Syntax: -webkit-transform: scaleZ(sz)

Where sz represents how much the element should be scaled in the z direction. For example, scaleZ(1.1)

The scaleZ() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X version 10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
skew() Skews the element along the x and y axes.

Syntax: -webkit-transform: skew(angleX [, angleY])

Where angleX represents how much the element should be skewed in the x direction, and angleY in the y direction. The angle can be represented by deg, rad or grad units. For example, skew(40deg,-5deg)

The skew() transform function is available on the following:

  • Safari 3.1 and later.
  • iOS 2.0 and later.
  • Google Chrome 1.0 and later.
skewX() Skews the element along the x axes.

Syntax: -webkit-transform: skewX(angle)

Where angle represents how much the element should be skewed in the x direction. The angle can be represented by deg, rad or grad units. For example, skew(40deg)

The skewX() transform function is available on the following:

  • Safari 3.1 and later.
  • iOS 2.0 and later.
  • Google Chrome 1.0 and later.
skewY() Skews the element along the x axes.

Syntax: -webkit-transform: skewY(angle)

Where angle represents how much the element should be skewed in the y direction. The angle can be represented by deg, rad or grad units. For example, skew(40deg)

The skewY() transform function is available on the following:

  • Safari 3.1 and later.
  • iOS 2.0 and later.
  • Google Chrome 1.0 and later.
translate() Specifies a 2D translation vector.

Syntax: -webkit-transform: translate(deltaX [, deltaY])

Where deltaX represents how much the element should be translated in the x direction, and deltaY is the number of units to translate in the y direction. The angle can be represented by a percentage or length.

The translate() transform function is available on the following:

  • Safari 3.1 and later.
  • iOS 2.0 and later.
  • Google Chrome 1.0 and later.
translate3d() Specifies a 3D translation vector.

Syntax: -webkit-transform: translate3d(deltaX, deltaY, deltaZ)

Where deltaX represents how much the element should be translated in the x direction, deltaY is the number of units to translate in the y direction, and deltaZ is the number of units to translate in the z direction. The angle can be represented by a percentage or length.

The translate3d() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X v10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.
translateX() Specifies a translation in the x direction.

Syntax: -webkit-transform: translateX(deltaX)

Where deltaX represents how much the element should be translated along the x axis. The angle can be represented by a percentage or length.

The translateX() transform function is available on the following:

  • Safari 3.1 and later.
  • iOS 2.0 and later.
  • Google Chrome 1.0 and later.
translateY() Specifies a translation in the y direction.

Syntax: -webkit-transform: translateY(deltaY)

Where deltaY represents how much the element should be translated along the y axis. The angle can be represented by a percentage or length.

The translateY() transform function is available on the following:

  • Safari 3.1 and later.
  • iOS 2.0 and later.
  • Google Chrome 1.0 and later.
translateZ() Specifies a translation in the z direction.

Syntax: -webkit-transform: translateZ(deltaZ)

Where deltaZ represents how much the element should be translated along the z axis. The angle can be represented by a percentage or length.

The translateZ() transform function is available on the following:

  • Safari 4.0.3 and later running on Mac OS X v10.6 and later.
  • iOS 2.0 and later.
  • Google Chrome 12.0 and later.

Default Value

The default value for the -webkit-transform property is none (which means that no transforms are applied).

Availability

The -webkit-transform property is available in:

For 2D transforms:

For 3D transforms:

CSS3 Equivalent

The CSS3 equivalent to the -webkit-transform property is the transform property. It's always good practice to use the CSS3 equivalent in your code.

Browser Compatability

This property is a proprietary extension that is only supported in Chrome and Safari browsers. For maximum browser compatibility, you should add the W3C CSS3 equivalent to your code. This is typically done by removing the -webkit- prefix, however, you should always check the correct syntax before implementing your code (at the time of writing, CSS3 was still a work in progress).

Also consider adding other proprietary extensions such as -ms- for Internet Explorer, -moz- for Firefox, -o- for Opera etc. However, you should check that a corresponding extension exists before doing this, as not all browsers have corresponding extensions, and those that do may not necessarily accept the same parameters.