transform
allows us to transform the elements in different ways, such as rotate, scale, move, skew, etc.
transform
can different values:
With translate
value, we can move the element from one position to another on a webpage.
translateX
translateY
translate(x,y)
Example 1: The image will be moved 200px to the right (with positive integer)
img {
transform: translateX(200px);
}
Example 2: The image will be moved 200px to the left (with negative integer)
img {
transform: translateX(-200px);
}
Example 3: The image will be moved 200px down (with positive integer)
img {
transform: translateY(200px);
}
Example 4: The image will be moved 200px up (with negative integer)
img {
transform: translateY(-200px);
}
Example 5: The image will be moved 200px left and down
img {
transform: translate(-200px, 200px);
}
scale() helps scale the element, making it bigger or smaller.
Similar to translate, we can also use scaleX or scaleY
Note
Example 1: The image will be stretched 3 times along the x-axis
img {
transform: scaleX(3);
}
Example 2: The image will be shrinked into half along the y-axis
img {
transform: scaleY(0.5);
}
Example 1: The image will be stretched 3 times along both direction
img {
transform: scale(3);
}