DEV Community 👩‍💻👨‍💻

Cover image for CSS Transform 2D and 3D
Md Yasin Miah
Md Yasin Miah

Posted on

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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

div {
  transform: rotateX(2deg);
}
Enter fullscreen mode Exit fullscreen mode

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

div {
  transform: rotateX(2deg);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.