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

0 votes

0 votes

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.

- All categories
- History, Politics & ... (4609)
- General Knowledge (1400)
- Sports (1268)
- Career and Education (1250)
- troubleshooting (988)
- Travel & Places (885)
- Current affair (850)
- Technology (547)
- Innovation, Discover... (356)
- USA History (344)
- Bollywood & Celebrit... (336)
- MindStick Software (334)
- indian Polity and Co... (319)
- Airlines & Air Trave... (312)
- Richest and Most Pow... (301)
- social networking (295)
- Books & Novels (259)
- Gadgets (250)
- Health (234)
- Q&A categories (232)
- more..

## Please log in or register to add a comment.