Transform

If you are looking to rotate, scale or change the position of an element, then you should learn how to work with transform.

It is a CSS property which is so helpful when making a website, let's go and learn each of them:

• Rotate
• Scale
• Translate
• Skew

Rotate

Rotate is one of the value of transform which you can use for rotating your element in any direction.

div {
  transform: rotate(0deg);
  transform: rotateX(0deg);
  transform: rotateY(0deg);
}

How (rotateX) looks like:

What about (rotateY):

Scale

With scale(), you can resize your element.

div {
  transform: scale(1);
  transform: scaleX(1);
  transform: scaleY(1);
}

rotateX()

rotateY()

Translate

You can move your element by using translate value.

div {
  transform: translate(0px, 0px);
}

Skew

It defines a transformation that skews an element on the 2D plane.

div {
  transform: skew(0deg);
  transform: skewX(0deg);
  transform: skewY(0deg);
}

skewX()

skewY()