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.
