CSS 2D Transforms
The CSS transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements.
Mouse over the element below to see a 2D transformation:
CSS 2D Transforms Functions
With the CSS transform property you can use the following 2D transformation functions:
translate()rotate()scaleX()scaleY()scale()skewX()skewY()skew()matrix()
The CSS translate() Function
The translate() function moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).
The following example moves the
Example
div {
transform: translate(50px, 100px);
}
The CSS rotate() Function
The rotate() function rotates an element clockwise or counter-clockwise according to a given degree.
The following example rotates the
Example
div {
transform: rotate(20deg);
}
Using negative values will rotate the element counter-clockwise.
The following example rotates the
Example
div {
transform: rotate(-20deg);
}
CSS Transform Properties
The following table lists all the 2D transform properties:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
CSS 2D Transform Functions
| Function | Description |
|---|---|
| matrix() | Defines a 2D transformation, using a matrix of six values |
| translate() | Defines a 2D translation, moving the element along the X- and the Y-axis |
| translateX() | Defines a 2D translation, moving the element along the X-axis |
| translateY() | Defines a 2D translation, moving the element along the Y-axis |
| scale() | Defines a 2D scale transformation, scaling the elements width and height |
| scaleX() | Defines a 2D scale transformation, scaling the element's width |
| scaleY() | Defines a 2D scale transformation, scaling the element's height |
| rotate() | Defines a 2D rotation, the angle is specified in the parameter |
| skew() | Defines a 2D skew transformation along the X- and the Y-axis |
| skewX() | Defines a 2D skew transformation along the X-axis |
| skewY() | Defines a 2D skew transformation along the Y-axis |
Want to go beyond the notes?
Join CodingNow 2.0's CSS course — live mentorship, real projects, and 100% placement support.
Enroll Now — Free Demo AvailableCSS 2D Transforms – FAQs
Quick answers about learning CSS 2D Transforms in CSS.
