Transform

I. What is CSS transform?

transform allows us to transform the elements differently, such as rotate, scale, move, skew, etc.

transform can have different values:

• translate
• scale
• rotate
• skew

II. translate()

With the translate value, we can move the element from one position to another on a webpage.

• If we want to move the element on the x-axis, we use translateX
• To move the element on the y-axis, we use translateY
• To move the element on both x-axis and y-axis, we use translate(x,y)

Example 1: The image will be moved 200px to the right (with a positive integer).

img {
  transform: translateX(200px);
}

Example 2: The image will be moved 200px to the left (with a negative integer).

img {
  transform: translateX(-200px);
}

Example 3: The image will be moved 200px down (with a positive integer).

img {
  transform: translateY(200px);
}

Example 4: The image will be moved 200px up (with a negative integer).

img {
  transform: translateY(-200px);
}

Example 5: The image will be moved 200px left and down

img {
  transform: translate(-200px, 200px);
}

III. scale()

scale() helps scale the element, making it bigger or smaller.

Similar to translate, we can also use scaleX or scaleY.

• scaleX: stretch or shrink the element along the x-axis
• scaleY: stretch or shrink the element along the y-axis

Note

• For value 1, it won’t do anything.
• For value > 1, the element will be stretched.
• For value < 1, the element will be shrinked.

Example 1: The image will be stretched 3 times along the x-axis

img {
  transform: scaleX(3);
}

Example 2: The image will be shrunk into half along the y-axis

img {
  transform: scaleY(0.5);
}

Example 1: The image will be stretched 3 times in both directions.

img {
  transform: scale(3);
}