By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Transform Property

The CSS Transform Property can be used to rotate, move, scale, skew, etc. The property is used to create 2D or 3D alterations of elements.

Created: 2012-06-13 15:37

The CSS Transform Property can be used to rotate, move, or make elements skew, etc. Some browsers may already support the property, otherwise they likely do support the browser specific prefix alternative property.

The prefixed alternative properties are as follows:

-webkit-transform:rotate(5deg);Safari, Chrome
-moz-transform:rotate(5deg);Firefox
-ms-transform:rotate(5deg);Internet Explorer
-o-transform:rotate(5deg);Opera

It is generally considered safe to use the property already, you can safely remove the prefixed properties when browsers support the css transform property. Some bugs may occur – but usually they are minor – such as a property not working on certain elements, etc. You should also check out the Tutorial on element rotation, to see how this property can be creatively used.

Possible values

noneNo transformation takes place.
rotate(angle)Applies a 2D rotation on the element.
rotate3d(x,y,z,angle)Applies a 3D rotation on the element.
rotateX(angle)Applies a 3D rotation along the X-axis.
rotateY(angle)Applies a 3D rotation along the Y-axis.
rotateZ(angle)Applies a 3D rotation along the Z-axis.
skew(x,y)Applies a 2D skew transformation along the X-axis and Y-axis of the element.
skewX(angle)Applies a 2D skew transformation along the X-axis of the element.
skewY(angle)Applies a 2D skew transformation along the Y-axis of the element.
perspective(n)Applies a perspective view on a 3D transformed element.
scale(x,y)Applies a 2D scale along the X-axis and Y-axis of the element.
scale3d(x,y,z)Applies a 3D scale along the X-axis, Y-axis and Z-axis of the element.
scaleX(x)Applies a 3D scale along the X-axis of the element.
scaleY(y)Applies a 3D scale along the Y-axis of the element.
scaleZ(z)Applies a 3D scale along the Z-axis of the element.
matrix(n,n,n,n,tx,ty)Applies a 2D transformation of 6 values, where tx and ty takes a length value.
translate(x,y)
translate3d(x,y,z)
translateX(x)
translateY(y)
translateZ(z)

CSS Transform Examples

.A {
  transform: rotate(5deg);
  /* The below can be removed if targeted browser supports transform */
  -moz-transform: rotate(5deg);
  -webkit-transform:rotate(5deg);
  -o-transition:rotate(5deg);
}

See also

  1. Rotate Images in a Gallery with CSS – how to rotate elements with CSS Transform.

Inherited? - NO!