Transform

I. What is CSS transform?

transform allows us to transform the elements in different ways, such as rotate, scale, move, skew, etc.

transform can different values:

• translate
• scale
• rotate
• skew

II. translate()

With 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 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);
}

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 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);
}