DEV Community

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

Posted on

2 2

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)