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.
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: The parameters
The parameters Example: The
|
||||||||||||||||
matrix3d() |
Specifies a 3D transformation as a 4 x 4 matrix.
Syntax: The parameters represent a 4x4 homogeneous matrix of 16 values in column-major order:
The
|
||||||||||||||||
perspective() |
Specifies a perspective projection matrix.
Syntax: 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
|
||||||||||||||||
rotate() |
Specifies a 2D rotation clockwise around the element's origin.
Syntax: Where angle is an angle represented by The operation corresponds to the matrix The
|
||||||||||||||||
rotate3d() |
Specifies a 3D rotation.
Syntax: Where
The
|
||||||||||||||||
rotateX() |
Rotates the element clockwise around the x-axis.
Syntax: Where angle is an angle represented by The
|
||||||||||||||||
rotateY() |
Rotates the element clockwise around the y-axis.
Syntax: Where angle is an angle represented by The
|
||||||||||||||||
rotateZ() |
Rotates the element clockwise around the x-axis.
Syntax: Where angle is an angle represented by The
|
||||||||||||||||
scale() |
Scales the element (i.e. changes its size) in 2D.
Syntax: Where scaleX represents how much the element should be scaled in the The
|
||||||||||||||||
scale3d() |
Scales the element (i.e. changes its size) in 3D.
Syntax: Where scaleX represents how much the element should be scaled in the The
|
||||||||||||||||
scaleX() |
Scales the element (i.e. changes its size) in the x direction.
Syntax: Where sx represents how much the element should be scaled in the The
|
||||||||||||||||
scaleY() |
Scales the element (i.e. changes its size) in the x direction.
Syntax: Where sy represents how much the element should be scaled in the The
|
||||||||||||||||
scaleZ() |
Scales the element (i.e. changes its size) in the x direction.
Syntax: Where sz represents how much the element should be scaled in the The
|
||||||||||||||||
skew() |
Skews the element along the x and y axes.
Syntax: Where angleX represents how much the element should be skewed in the The
|
||||||||||||||||
skewX() |
Skews the element along the x axes.
Syntax: Where angle represents how much the element should be skewed in the The
|
||||||||||||||||
skewY() |
Skews the element along the x axes.
Syntax: Where angle represents how much the element should be skewed in the The
|
||||||||||||||||
translate() |
Specifies a 2D translation vector.
Syntax: Where deltaX represents how much the element should be translated in the The
|
||||||||||||||||
translate3d() |
Specifies a 3D translation vector.
Syntax: Where deltaX represents how much the element should be translated in the The
|
||||||||||||||||
translateX() |
Specifies a translation in the x direction.
Syntax: Where deltaX represents how much the element should be translated along the The
|
||||||||||||||||
translateY() |
Specifies a translation in the y direction.
Syntax: Where deltaY represents how much the element should be translated along the The
|
||||||||||||||||
translateZ() |
Specifies a translation in the z direction.
Syntax: Where deltaZ represents how much the element should be translated along the The
|
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:
- Safari 3.1 and later
- iOS 2.0 and later
- Google Chrome 1.0 and later
For 3D transforms:
- 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
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.