CSS Transform 2D and 3D

CSS TRANSFORMS
CSS 2D transforms Method: With the transform: property the 2D methods are

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

translate()
With the translate() method we can move one element from its current position like,

div {
  transform: translate(50px, 100px);
}

Here translate(x, y) are assign as the value of x(horizontal) & y(vertical)

rotate()
We use the rorate() method so that we can rotate our element clockwise or anti clockwise like,

div {
  transform: rotate(40deg);
}

rotate(x) can assign a positive degree value to rotate clockwise and a negative degree to rotate anti-clockwise.

scale()
With scale() we can increase or can decrease element height and with.

div {
  transform: scale(2, 3);
}

Here the first value assign with and the second value stands for height.

skew()
The skew method skews an element in order of X-axis and Y-axis with angle.

div {
  transform: scale(2deg, 3deg);
}

Here first value assigns X-axis and the second value assigns Y-axis. skewY() only for Y-axis with one value, skewX() only for X-axis with one value.

matrix()
The matrix method is the combination of all transform methods.

div {
  transform: matrix(2, 3, 4, 4, 2, 4);
}

CSS 3D transforms Method: With the transform: property the 3D

• methods are
• rotateX()
• rotateY()
• rotateZ()

rotateX()
RotateX method rotates an element in X-axis with degree value.

div {
  transform: rotateX(2deg);
}

rotateY()
RotateY method rotates an element in Y-axis with degree value.

div {
  transform: rotateX(2deg);
}

rotateZ()
RotateZ method rotates an element in Z-axis with degree value.

div {
  transform: rotateX(2deg);
}