What is 2D and 3D transform in CSS?

0 votes
33 views
Ethan Karla asked 14 days ago in programming by Ethan Karla

   What is the Transform property in CSS? How many types of transformation properties are available that we can use

1 Answer

0 votes
Shivam Prajapati answered 14 days ago by Shivam Prajapati

CSS3 comes with a transform property which is used to change the size, shape and position of any element.
They are of 2 types:
1.) 2D Transform
Following is a list of 2D transforms methods:
  • translate(x,y): It is used to transform the element along X-axis and Y-axis.
  • translateX(n): It is used to transform the element along X-axis.
  • translateY(n): It is used to transform the element along Y-axis.
  • rotate(): It is used to rotate the element on the basis of an angle.
  • scale(x,y): It is used to change the width and height of an element.
  • scaleX(n): It is used to change the width of an element.
  • scaleY(n): It is used to change the height of an element.
  • skewX(): It specifies the skew transforms along with X-axis.
  • skewY():It specifies the skew transforms along with Y-axis.
  • matrix(): It specifies matrix transforms.
2.) 3D Transform
Following is a list of 3D transforms methods:
  • matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n):It specifies a 3D transformation, using a 4x4 matrix of 16 values.
  • translate3D(x,y,z):It specifies a 3D translation.
  • translateX(x):It specifies 3D translation, using only the value for the X-axis.
  • translateY(y):It specifies 3D translation, using only the value for the Y-axis.
  • translateZ(z):It specifies 3D translation, using only the value for the Z-axis.
  • scale3D(x,y,z):It specifies 3D scale transformation
  • scaleX(x):It specifies 3D scale transformation by giving a value for the X-axis.
  • scaley(y):It specifies 3D scale transformation by giving a value for the Y-axis.
  • scaleZ(z):It specifies 3D scale transformation by giving a value for the Z-axis.
  • rotate3D(X,Y,Z,angle):It specifies 3D rotation along with X-axis, Y-axis and Z-axis.
  • rotateX(angle):It specifies 3D rotation along with X-axis.
  • rotateY(angle):It specifies 3D rotation along with Y-axis.
  • rotateZ(angle):It specifies 3D rotation along with Z-axis.
  • perspective(n):It specifies a perspective view for a 3D transformed element.