CSS Transform, as the name indicates manipulation of HTML elements. It allows the elements which are styled in CSS to get transformed to 2D. In order to transform elements of HTML, transform property is used. You can change the shape of elements, you can resize it and also change the position of elements.
It is given by,
transform: function(parameters)
2D Transformations:
2D is more simpler than 3D.
There are 4 methods in 2D transformations. They are as follows:
1. skew(x,y):
It allows skewing elements along X and Y axis. It takes 2 parameters.
(a) Dimensions of xaxis.
(b) Dimensions of yaxis.
Eg: skew(15deg, 20deg)
We can even target only the x argument or y argument by using skewX and skewY.
(I) skewX(x): skew elements along Xaxis.
Eg: skewX(15deg)
(II)skewY(y): skew elements along Yaxis.
Eg: skewY(20deg)
You are allowed to use even negative values in the parameters.
2. scale(x,y):
It allows expansion and reduction in the size of an element. It also takes 2 parameters.
(a) width of an element.
(b) height of an element.
Eg: scale(1,1) changes to scale(0.5, 0.5)
Here, width and height changed to 50px.
We can choose to resize the element by passing width or height by using scaleX and scaleY.
(I)scaleX(x): resizing element based on width.
Eg: scaleX(2)
(II)scaleY(y): resizing element based on height.
Eg: scaleY(2)
3. rotate:
It allows rotation of an element clockwise or anticlockwise based on the given degree. This method takes only 1 argument with positive and negative values.
Eg: rotate(20deg) rotates clockwise
rotate(20deg) rotates anticlockwise
4. translate(x,y):
It allows to move an element from its current position on X, Y axis or both.It takes 2 parameters. It can take both positive and negative values
(a) Dimensions of xaxis.
(b) Dimensions of yaxis.
Eg: translate(10px, 20px)
(I)translateX(x): to move only on Xaxis.
Eg: translateX(50px) moves 50px to right.
translateX(50px) moves 50px to left.
(II)translateY(y): to move only on Yaxis.
Eg: translateY(50px) moves 50px to bottom.
translateY(50px) moves 50px to top.
There are 2 properties of transform.They are:

transform: applies transformation to an element.
Syntaxtransform: nonetransformfunctionsinitialinherit;

transformorigin: changes the position of an element.
Syntaxtransformorigin: xaxis yaxisinitialinherit;
3D Transformations:
On the other hand, when it comes to 3D transformations, it allows an element rendering by CSS to get transformed in 3Dimensional space.
The transform methods are almost same by transforming it along the x,y and z axes respectively where xaxis allows to transform horizontally, yaxis allows to transform vertically and zaxis allows to transform front and back which is outside the 2D plane.
There are 5 properties of transform used in 3D transformations.They are:

perspective: We use this in order to transform in 3Dspace.
Syntaxperspective: lengthnone;

perspectiveorigin: It defines where the 3D elements are placed based on the xaxis and yaxis.
Syntaxperspectiveorigin: xaxis yaxisinitialinherit;

transformorigin: It allows you to change the x and y positions of the transformed elements.
Syntaxtransformorigin: xaxis yaxis zaxisinitialinherit;

transformstyle: It allows the child elements to preserve 3D transform.
Syntaxtransformstyle: flatpreserve3dinitialinherit

backfacevisibility: It defines whether an element should be visible or not when it doesn’t face the screen.
Syntaxbackfacevisibility: visiblehiddeninitialinherit;
We have 3 methods in 3DTransformations which are almost same as in case of 2D.
1. translate:
It allows elements to move around the screen. We can move it horizontally, vertically and outside of 2D pane by using transformX( ), transformY( ) and transformZ( ) respectively.
The shorthand notation of the translate method is given by: translate3d(xaxis,yaxis,zaxis)
Eg: translate3d(50px, 50px, 0)
2. rotate:
It allows elements to rotate along axes. We can rotate it horizontally, vertically and outside of 2D pane by using rotateX( ), rotateY( ) and rotateZ( ) respectively.
The shorthand notation of the rotate method is given by: rotate3d(xaxis,yaxis,zaxis, angle degree) where the fourth parameter tells us by how many degrees are we intending to rotate.
Eg: rotate3d(1, 1, 1, 45deg)
3. scale:
It allows elements to transform based on the size unlike the other methods which emphasize on the movement of elements.
We can increase the width, height of an element using scaleX( ) and scaleY( ) repsectively. We use scaleZ( ) to transform it on 3Dpane.
The shorthand notation of the translate method is given by: scale3d(xaxis,yaxis,zaxis)
Eg: scale3d(1.5, 1.5, 1.5)
GPU acceleration:
In order to speed things up in our keyframe animation, we can use hardware acceleration, which means offloading of work from CPU to GPU(graphic processing unit). To trigger hardware acceleration in our keyframes, we can simply set the value of transform as translate3d(0,0,0).
We can actually trigger using any of the 3d transform methods to speedup hardware acceleration like scale3d, rotate3d, rotateZ .
Following, we have the browser compatibility for 2D and 3D transform in specific.
Therefore, we use the above transform methods to manipulate the elements by skewing, translating, scaling and rotating them in 2D and 3D panes.