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.

Advertisements
This entry was posted in CSS3, web design, web development and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s