CSS transform
The CSS transform
property is used to transform an element in twodimensional (2D) or threedimensional (3D) space. For example, you can rotate elements, scale them, skew them, and more.
The 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).
Syntax
Possible Values
Here are the transform functions accepted by the transform
property as outlined by the W3C CSS3 specification.
These are grouped by 2D (two dimensional) and 3D (three dimensional) functions.
2D Transform Functions
matrix()

This function specifies a 2D transformation in the form of a transformation matrix of the six values af (that is, a, b, c, d, e and f).
translate()

This function moves the position of the element. It specifies a 2D translation by the vector [tx, ty], where tx is the first translationvalue parameter and ty is the optional second translationvalue parameter. If <ty> is not provided, ty has zero as a value.
translateX()

This function moves the element horizontally. It specifies a translation by the given amount in the X direction.
translateY()

This function moves the element vertically. It specifies a translation by the given amount in the Y direction.
scale()

This function modifies the size of the element. It specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first. For example, scale(1, 1) would leave an element unchanged, while scale(2, 2) would cause it to appear twice as long in both the X and Y axes, or four times its typical geometric size.
scaleX()

Specifies a 2D scale operation using the [sx,1] scaling vector, where sx is given as the parameter.
scaleY()

Specifies a 2D scale operation using the [1,sy] scaling vector, where sy is given as the parameter.
rotate()

This function specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the
transformorigin
property. For example,rotate(90deg)
would cause elements to appear rotated onequarter of a turn in the clockwise direction. skew()

Specifies a 2D skew transformation along the X and/or Y axis by the given angles. If the second parameter is not provided, it has a zero value.
skewX()

Specifies a 2D skew transformation along the X axis by the given angle.
skewY()

Specifies a 2D skew transformation along the Y axis by the given angle.
3D Transform Functions
3D transform functions allow you to apply transformations along three axes: the x, y, and z axes, as demonstrated by this image of a three dimensional Cartesian coordinate system.
Below are the 3D transform functions available in CSS.
matrix3d()

This function specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in columnmajor order.
translate3d()

This function specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translationvalue parameters respectively.
translateZ()

This function specifies a 3D translation by the vector [0,0,tz] with the given amount in the Z direction.
scale3d()

This function specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
scaleZ()

This function specifies a 3D scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.
rotate3d()

This function specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters. A direction vector that cannot be normalized, such as [0,0,0], will result in the rotation not being applied.
Rotation is clockwise as the user looks from the end of the vector toward the origin.
rotateX()

This is the same as
rotate3d(1, 0, 0, <angle>)
. rotateY()

This is the same as
rotate3d(0, 1, 0, <angle>)
. rotateZ()

This is the same as
rotate3d(0, 0, 1, <angle>)
(which is also the same asrotate( <angle> )
. perspective()

This function defines the distance between the z=0 plane and the user in order to give to the 3Dpositioned element some perspective.
The W3C also has these mathematical descriptions of transform functions if you're interested.
In addition, all CSS properties also accept the following CSSwide keyword values as the sole component of their property value:
initial
 Represents the value specified as the property's initial value.
inherit
 Represents the computed value of the property on the element's parent.
unset
 This value acts as either
inherit
orinitial
, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
Basic Property Information
 Initial Value
none
 Applies To
This property applies only to transformable elements.
In HTML, a transformable element is either:
 a blocklevel or atomic inlinelevel element
 or whose CSS
display
property computes totablerow
,tablerowgroup
,tableheadergroup
,tablefootergroup
,tablecell
, ortablecaption
In SVG, a transformable element is an element which has the attributes
transform
,patternTransform
orgradientTransform
. Inherited?
 No
 Media
 Visual
 Computed Value
 As specified, but with relative lengths converted into absolute lengths.
 Animatable
 Yes (see example)
Example Code
Basic CSS
You can also provide a list of transform functions. For example, you could do this:
Working Example within an HTML Document
CSS Specifications
 The
transform
property is defined in CSS Transforms Module Level 1 (W3C Working Draft, 26 November 2013).
Browser Support
The following table provided by Caniuse.com shows the level of browser support for this feature.
Vendor Prefixes
For maximum browser compatibility many web developers add browserspecific properties by using extensions such as webkit
for Safari, Google Chrome, and Opera (newer versions), ms
for Internet Explorer, moz
for Firefox, o
for older versions of Opera etc. As with any CSS property, if a browser doesn't support a proprietary extension, it will simply ignore it.
This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.
The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a nonprefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.
Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don't need to. It also removes old, unnecessary prefixes from your CSS.
You can also use Autoprefixer with preprocessors such as Less and Sass.