The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

/* Keyword values */ transform: none;  /* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad);  /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);  /* Global values */ transform: inherit; transform: initial; transform: revert; transform: unset; 

transform

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

If the property has a value different than none, a stacking context will be created. In that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.

Warning: Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

Syntax

/* Keyword values */ transform: none;  /* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad);  /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);  /* Global values */ transform: inherit; transform: initial; transform: revert; transform: unset; 

The transform property may be specified as either the keyword value none or as one or more <transform-function> values.

If perspective() is one of multiple function values, it must be listed first.

Values

<transform-function>

One or more of the CSS transform functions to be applied. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

none

Specifies that no transform should be applied.

Accessibility concerns

Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide.

Also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.

Find out more:

MDN Understanding WCAG, Guideline 2.3 explanations Understanding Success Criterion 2.3.3 | W3C Understanding WCAG 2.1

Formal definition

Initial value	none
Applies to	transformable elements
Inherited	no
Percentages	refer to the size of bounding box
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	a transform
Creates stacking context	yes

Formal syntax

none | <transform-list>
where <transform-list> = <transform-function>+
where <transform-function> = <matrix()> | <translate()> | <translateX()> | <translateY()> | <scale()> | <scaleX()> | <scaleY()> | <rotate()> | <skew()> | <skewX()> | <skewY()> | <matrix3d()> | <translate3d()> | <translateZ()> | <scale3d()> | <scaleZ()> | <rotate3d()> | <rotateX()> | <rotateY()> | <rotateZ()> | <perspective()>
where <matrix()> = matrix( <number>#{6} )<translate()> = translate( <length-percentage> , <length-percentage>? )<translateX()> = translateX( <length-percentage> )<translateY()> = translateY( <length-percentage> )<scale()> = scale( <number> , <number>? )<scaleX()> = scaleX( <number> )<scaleY()> = scaleY( <number> )<rotate()> = rotate( [ <angle> | <zero> ] )<skew()> = skew( [ <angle> | <zero> ] , [ <angle> | <zero> ]? )<skewX()> = skewX( [ <angle> | <zero> ] )<skewY()> = skewY( [ <angle> | <zero> ] )<matrix3d()> = matrix3d( <number>#{16} )<translate3d()> = translate3d( <length-percentage> , <length-percentage> , <length> )<translateZ()> = translateZ( <length> )<scale3d()> = scale3d( <number> , <number> , <number> )<scaleZ()> = scaleZ( <number> )<rotate3d()> = rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )<rotateX()> = rotateX( [ <angle> | <zero> ] )<rotateY()> = rotateY( [ <angle> | <zero> ] )<rotateZ()> = rotateZ( [ <angle> | <zero> ] )<perspective()> = perspective( <length> )
where <length-percentage> = <length> | <percentage>

Examples

Translating and rotating an element

HTML

<div>Transformed element</div> 

CSS

div {   border: solid red;   transform: translate(30px, 20px) rotate(20deg);   width: 140px;   height: 60px; } 

Result

More examples

Please see Using CSS transforms and <transform-function> for more examples.

Specifications

Specification
CSS Transforms Module Level 2 # transform-functions
CSS Transforms Module Level 1 # transform-property

See also

Using CSS transforms <transform-function> data type with all the transform functions explained. Online tool to visualize CSS Transform functions: CSS Transform Playground

Last modified: Oct 25, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体)正體中文 (繁體) Change language