Flash cards
Review the key moves
What is the main idea behind CSS 2D Transforms?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___: translate(50px, 100px);Put the learning moves in the order that makes the concept easiest to apply.
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 <div> element 50 pixels to the right, and 100 pixels down from its current position:
Example
div {
transform: translate(50px, 100px);
}Live preview
The CSS rotate() Function
The rotate() function rotates an element clockwise or counter-clockwise according to a given degree.
The following example rotates the <div> element clockwise with 20 degrees:
Example
div {
transform: rotate(20deg);
}Live preview
Using negative values will rotate the element counter-clockwise.
The following example rotates the <div> element counter-clockwise with 20 degrees:
Example
div {
transform: rotate(-20deg);
}Live preview
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 |