- CSS transform Property
- Definition and Usage
- Browser Support
- Syntax
- Property Values
- More Examples
- rotate()
- Try it
- Syntax
- Values
- Examples
- Basic example
- HTML
- CSS
- Result
- Combining rotation with another transformation
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- transform
- Try it
- Syntax
- Values
- Accessibility concerns
- Formal definition
- rotate
- Try it
- Syntax
- Values
- Formal definition
- Formal syntax
- Examples
- Rotating an element on hover
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
CSS transform Property
Rotate, skew, and scale three different elements:
div.b transform: skewY(20deg);
>
Definition and Usage
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
Default value: | none |
---|---|
Inherited: | no |
Animatable: | yes. Read about animatable Try it |
Version: | CSS3 |
JavaScript syntax: | object.style.transform=»rotate(7deg)» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
Property | |||||
---|---|---|---|---|---|
transform (2D) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 10.5 -o- |
transform (3D) | 36.0 12.0 -webkit- | 12.0 | 10.0 | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
Syntax
Property Values
Value | Description | Demo |
---|---|---|
none | Defines that there should be no transformation | Demo ❯ |
matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values | Demo ❯ |
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Defines a 3D transformation, using a 4×4 matrix of 16 values | |
translate(x,y) | Defines a 2D translation | Demo ❯ |
translate3d(x,y,z) | Defines a 3D translation | |
translateX(x) | Defines a translation, using only the value for the X-axis | |
translateY(y) | Defines a translation, using only the value for the Y-axis | |
translateZ(z) | Defines a 3D translation, using only the value for the Z-axis | |
scale(x,y) | Defines a 2D scale transformation | Demo ❯ |
scale3d(x,y,z) | Defines a 3D scale transformation | |
scaleX(x) | Defines a scale transformation by giving a value for the X-axis | |
scaleY(y) | Defines a scale transformation by giving a value for the Y-axis | |
scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis | |
rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter | Demo ❯ |
rotate3d(x,y,z,angle) | Defines a 3D rotation | |
rotateX(angle) | Defines a 3D rotation along the X-axis | Demo ❯ |
rotateY(angle) | Defines a 3D rotation along the Y-axis | Demo ❯ |
rotateZ(angle) | Defines a 3D rotation along the Z-axis | |
skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis | Demo ❯ |
skewX(angle) | Defines a 2D skew transformation along the X-axis | Demo ❯ |
skewY(angle) | Defines a 2D skew transformation along the Y-axis | Demo ❯ |
perspective(n) | Defines a perspective view for a 3D transformed element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Images thrown on the table
This example demonstrates how to create «polaroid» pictures and rotate the pictures.
rotate()
The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a data type.
Try it
The fixed point that the element rotates around — mentioned above — is also known as the transform origin. This defaults to the center of the element, but you can set your own custom transform origin using the transform-origin property.
Syntax
Values
Cartesian coordinates on ℝ^2 | Homogeneous coordinates on ℝℙ^2 | Cartesian coordinates on ℝ^3 | Homogeneous coordinates on ℝℙ^3 |
---|---|---|---|
( cos ( a ) — sin ( a ) sin ( a ) cos ( a ) ) | ( cos ( a ) — sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1 ) | ( cos ( a ) — sin ( a ) 0 sin ( a ) cos ( a ) 0 0 0 1 ) | ( cos ( a ) — sin ( a ) 0 0 sin ( a ) cos ( a ) 0 0 0 0 1 0 0 0 0 1 ) |
[cos(a) sin(a) -sin(a) cos(a) 0 0] |
Examples
Basic example
HTML
div>Normaldiv> div class="rotated">Rotateddiv>
CSS
div width: 80px; height: 80px; background-color: skyblue; > .rotated transform: rotate(45deg); /* Equal to rotateZ(45deg) */ background-color: pink; >
Result
Combining rotation with another transformation
If you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. For example, if you rotate before translating, the translation will be along the new axis of rotation!
HTML
div>Normaldiv> div class="rotate">Rotateddiv> div class="rotate-translate">Rotated + Translateddiv> div class="translate-rotate">Translated + Rotateddiv>
CSS
div position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; > .rotate background-color: transparent; outline: 2px dashed; transform: rotate(45deg); > .rotate-translate background-color: pink; transform: rotate(45deg) translateX(180px); > .translate-rotate background-color: gold; transform: translateX(180px) rotate(45deg); >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Feb 21, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
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.
Try it
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 transform ed. 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, 2, 3, 4, 5, 6); 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, 3, 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: revert-layer; transform: unset;
The transform property may be specified as either the keyword value none or as one or more values.
If perspective() is one of multiple function values, it must be listed first.
Values
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.
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.
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 |
rotate
The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property.
Try it
Syntax
/* Keyword values */ rotate: none; /* Angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* Vector plus angle value */ rotate: 1 1 1 90deg; /* Global values */ rotate: inherit; rotate: initial; rotate: revert; rotate: revert-layer; rotate: unset;
Values
x, y, or z axis name plus angle value
Specifies that no rotation should be applied.
Formal definition
Formal syntax
Examples
Rotating an element on hover
The following example shows how to use the rotate property to rotate an element along various axes on hover. The first box rotates 90 degrees on the Z axis hover, the second rotates 180 degrees on the Y axis on hover, and the third rotates 360 degrees on hover around a vector defined by coordinates.
HTML
div class="box" id="box1">rotate Zdiv> div class="box" id="box2">rotate Ydiv> div class="box" id="box3">vector & anglediv>
CSS
.box display: inline-block; margin: 1em; min-width: 6.5em; line-height: 6.5em; text-align: center; transition: 1s ease-in-out; border: 0.25em dotted; > #box1:hover rotate: 90deg; > #box2:hover rotate: y 180deg; > #box3:hover rotate: 1 2 1 360deg; >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Note: skew is not an independent transform value
Found a content problem with this page?
This page was last modified on Feb 21, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.