Advertisements
CSS3 transform Property
Topic: CSS3 Properties ReferencePrev|Next
Description
The transform CSS property applies a transformation to an element such as translate, rotate, scale etc. in 2D or 3D space.
The following table summarizes the usages context and the version history of this property.
| Default value: | none |
|---|---|
| Applies to: | Transformable elements |
| Inherited: | No |
| Animatable: | Yes. See animatable properties. |
| Version: | New in CSS3 |
Syntax
The syntax of the property is given with:
The example below shows the transform property in action.
Example
Try this code »img {
-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px); /* Firefox */
-ms-transform: translate(200px, 50px); /* IE 9 */
transform: translate(200px, 50px); /* Standard syntax */
}Property Values
The following table describes the values of this property.
| Value | Description |
|---|---|
translate(tx,ty) |
Moves the element by the given amount along the X and Y-axis. |
translate3d(tx,ty,tz) |
Moves the element by the given amount along the X, Y & Z-axis. |
translateX(tx) |
Moves the element by the given amount along the X-axis. |
translateY(ty) |
Moves the element by the given amount along the Y-axis. |
translateZ(tz) |
Moves the element by the given amount along the Z-axis. |
rotate(a) |
Rotates the element by the specified angle around the origin of the element, as defined by the transform-origin property. |
rotate3d(x,y,z, a) |
Rotates the element in 3D space by the angle specified in the last parameter, around the [x,y,z] direction vector. |
rotateX(a) |
Rotates the element by the given angle around the X-axis. |
rotateY(a) |
Rotates the element by the given angle around the Y-axis. |
rotateZ(a) |
Rotates the element by the given angle around the Z-axis. |
scale(sx,sy) |
Scale the width and height of the element up or down by the given amount. The function scale(1,1) has no effect. |
scale3d(sx,sy,sz) |
Scales the element by the given amount along the X, Y and Z-axis. The function scale3d(1,1,1) has no effect. |
scaleX(sx) |
Scales the element along the X-axis. |
scaleY(sy) |
Scales the element along the Y-axis. |
scaleZ(sz) |
Scales the element along the Z-axis. |
skew(ax,ay) |
Skews the element by the given angle along the X and Y-axis. |
skewX(ax) |
Skews the element by the given angle along the X-axis. |
skewY(ay) |
Skews the element by the given angle along the Y-axis. |
matrix(n,n,n,n,n,n) |
Specifies a 2D transformation in the form of a transformation matrix comprised of the six values. |
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) |
Specifies a 3D transformation in the form of a 4×4 transformation matrix of 16 values. |
perspective(length) |
Defines a perspective view for a 3D transformed element. In general, as the value of this function increases, the element will appear further away from the viewer. |
none |
Specifies that no transform should be applied. |
initial |
Sets this property to its default value. |
inherit |
If specified, the associated element takes the computed value of its parent element transform property. |
Browser Compatibility
The transform property is supported in all major modern browsers.
 |
Basic Support—
|
Further Reading
See tutorial on: CSS3 2D Transforms, CSS3 3D Transforms
Related properties: backface-visibility, perspective, perspective-origin, transform-origin, transform-style.
Advertisements
