What is 2D transform in CSS3?

CSS3 has 2D and 3D transform properties that allows to transform the elements. Transforming the elements means translating, rotating, scaling or skewing it. This will result in change of shape, size, and position of the element. Following are the properties that help you achieve 2D or 3D effects:

Translate: 
It will take two values, one for x-axis and other for y-axis. It is specified as follows: translate(10px, 50px). In this case, it will move 10px on x-axis and 50px on y-axis. For ex:

div {
 transform: translate(100px, 75px);
}

Rotate: 
It will rotate the element clockwise or anticlockwise. The values are degrees. It is specified as rotate(20deg) or rotate(-20deg). It will rotate the element by 20 degrees in clockwise or anticlockwise direction For ex:

div {
 transform: rotate(50deg);
}

Scale: 
It will increase the size of the element. It is specified as scale(x, y). The first value will increase the width of the element, and second value will increase its height. If scale(10,20) is specified, then width will be increase by 10 times and height will be increase by 20 times. For ex:

div {
 transform: scale(9, 7);
}

SkewX: 
It will skew the element along the X-axis. The value of skew is specified in degrees. If skewX(20deg) is specified then it will be skewed on X axis by 20 degrees. The value can be negative too. For ex:

div {
 transform: skewX(50deg);
}

SkewY: 
It is similar to SkewX with only difference of element being skewed along Y-axis. For ex:

div {
 transform: skewY(50deg);
}

Skew: 
It is similar to SkewX or SkewY with only difference that two values are specified X and Y. First specified value being X and second specified value being Y. For ex:

div {
 transform: skew(50deg, 50 deg);
}