How does 2D-3D transformation works in CSS?

Web Development
,
#1

A transformation in CSS is used to modify an element by its shape, size, and position. It transforms the elements along the X-axis and Y-axis.

CSS supports transform property. This transform property facilitates you to translate, rotate, scale and skews elements. Transformation is an effect that is used to change shape, size, and position. There are two types of transformation i.e. 2D and 3D transformation supported in CSS3.

The CSS 2D transforms are used to re-change the structure of the element as translate, rotate, scale and skew, etc. Following is a list of 2D transform 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.

The CSS 3D transforms facilitate you to move an element to X-axis, Y-axis, and Z-axis. Following is a list of 3D transform methods:

Function Description

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.