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.

### Like this:

Like Loading...

*Related*