Transform Functions in CSS3

CSS 3 transform property changes the coordinate position of CSS. By this property element can be translated,rotated, scaled, skews .

The transform functions include:

translate()

The translate(x, y) function is similar to relative positioning, translating, or relocating, an element by x from the left, and y from the top.

translateX()

The translateX(x) function is similar to the translate() function above, but only the left/right value is specified.

translateY()

The translateY(y) function is similar to the translate() function above, but only the top/bottom value is specified.

scale()

The scale(w, h) property scales an element by w width and h height. If only one value is declared, the scaling will be proportional. Since you likely don’t want to distort an element, you’ll generally see only one parameter in this transform function.

scaleX()

The scalex(w) function is similar to the scale() function above, but only the width value is specified. It is the same as declaring scale(w, 1).

scaleY()

The scaley(y) function is similar to the scale() function above, but only the height value is specified. It is the same as declaring scale(1, h)

rotate()

The rotate(angle) function with rotate an element about the point of origin (described below) but the angle value specified.

skew()

The skew(x,y) function specifies a skew along the X and Y axes. The x specifies the skew on the x-axis, the y specifies the skew on the y-axis. If there is only one parameter, then it’s the same as skew(x, 0), or skewX(x) . The values are angles: degrees, turns or grads.

skewX()

The skewx(x) function is similar to the skew() value above, but only the x-axis value is specified. It is the same as declaring skew(x,0).

skewY()

The skewy(y) function is similar to the skew() value above, but only the y-axis value is specified. It is the same as declaring skew(0,y).

The elements styled with CSS3 can be transformed in 2D or 3D space using CSS transform functions. CSS3 is a useful language to describe the rendering of structured documents like (HTML5 and XML) on screen, on paper etc.