CSS Properties Index   Positioning Properties

---

Rotate, scale, skew, or translate an element.

CSS	{ transform: none | transform-function }
Script	object.style.transform = none | transform-function

none	Specifies that no transform shall be applied.
transform-function	One or more of the allowed transform functions

The property is read/write with a default value of none; this attribute is not inherited.

The transform property allows elements styled with CSS to be transformed in two-dimensional or three-dimensional space.

It enables authors to easily rotate, scale, skew, or translate an element with minimal coding.

transform may be specified as either the keyword value none or as one or more transform function values.

element { transform: none }

element { transform: scale( ) }

element { transform: scale( ), rotate( ), skew( ), translate( ) }

When specifying more than one transform function, the net effect is as if each transform function had been specified separately in the order provided.

transform in most cases is implemented with a transition to better illustrate the gradual transformation, unless an instantaneous or fixed change is desired, like when building a 3D cube.

CSS also includes the Individual translate, rotate, and scale properties to allow authors to specify simple transforms independently.

NOTE: Only transformable elements, or elements whose layout is governed by the CSS box model, can be transformed.

The following example demonstrates the effects of applying the different transform functions. Each effect reverts back to its initial state in 2 seconds, you may choose the next option then.

Notice also the use of a simple transition to better visualize the transformations.

Run Sample | View Source

For more examples, check out the individual transform functions.

For a brief overview, please see Understanding and Using CSS Transforms.

rotate, scale, translate