CSS 2D Transforms
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:
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:
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:
Using negative values will rotate the element counter-clockwise.
The following example rotates the <div> element counter-clockwise with 20 degrees:
Transform Subpages
Continue learning about CSS 2D transforms:
- Scale Functions - scale(), scaleX(), scaleY()
- Skew and Matrix - skew(), skewX(), skewY(), matrix()
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 |
