CSS transforms enable the manipulation of elements by moving, rotating, scaling, and skewing them.
Hover over the element below to observe a 2D transformation:
This chapter covers the following CSS property:
transformThe numbers in the table indicate the initial browser version that offers complete support for the property.
Using the CSS transform property, you can employ the following 2D transformation techniques:
| Note: The next chapter will cover 3D transformations. |
The translate() method relocates an element from its current position based on the specified parameters for the X-axis and the Y-axis.
In the following example, the <div> element is shifted 50 pixels to the right and 100 pixels downward from its current position:
Example
| div { transform: translate(50px, 100px); } |
The rotate() method rotates an element either clockwise or counterclockwise by a specified degree.
In the following example, the <div> element is rotated clockwise by 20 degrees:
Example
| div { transform: rotate(20deg); } |
Negative values can be used to rotate the element counterclockwise.
In the following example, the <div> element is rotated counterclockwise by 20 degrees:
Example
|
div { |
The scale() method enlarges or reduces the size of an element based on the specified parameters for width and height.
In the following example, the <div> element is expanded to twice its original width and three times its original height:
Example
|
div { |
In the following example, the <div> element is reduced to half its original width and height:
Example
| div { transform: scale(0.5, 0.5); } |
The scaleX() method adjusts the width of an element, either enlarging or reducing it.
In the following example, the <div> element is expanded to twice its original width:
Example
| div { transform: scaleX(2); } |
In the following example, the <div> element is reduced to half its original width:
Example
| div { transform: scaleX(0.5); } |
The scaleY() method adjusts the height of an element, either enlarging or reducing it.
In the following example, the <div> element is expanded to three times its original height:
Example
| div { transform: scaleY(3); } |
In this example, the <div> element is resized to half of its original height.
Example
| div { transform: scaleY(0.5); } |
The skewX() method tilts an element along the X-axis by the specified angle.
Here’s an example where the <div> element is tilted 20 degrees along the X-axis:
Example
| div { transform: skewX(20deg); } |
The skewY() method tilts an element along the Y-axis by the specified angle.
Here’s an example where the <div> element is skewed by 20 degrees along the Y-axis:
Example
| div { transform: skewY(20deg); } |
The skew() method tilts an element along both the X and Y axes based on the specified angles.
In the following example, the <div> element is tilted 20 degrees along the X-axis and 10 degrees along the Y-axis:
Example
| div { transform: skew(20deg, 10deg); } |
If the second parameter is omitted, it defaults to zero. Therefore, the following example skews the <div> element 20 degrees along the X-axis:
Example
| div { transform: skew(20deg); } |
The matrix() method consolidates all 2D transform operations into a single function.
It accepts six parameters representing mathematical functions, enabling rotation, scaling, translation, and skewing of elements.
The parameters are as follows: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Example
|
div { |