• Tweet

With the CSS3 Transform property we can transform the appearance of elements. The transform property allows to translate, rotate, scale, and skew.

Each property is explained below:

Translate

With translate property, we an move an element from its original position by x-axis from the left side and y-axis from the top side. The Syntax of translate is

translate (x, y)

For example:

-webkit-transform: translate(-150px, 75px);
-moz-transform: translate(-150px, 75px);
-o-transform: translate(-150px, 75px);
transform: translate(-150px, 75px);

TranslateX

With translatex property, we can only specify the value of x-axis. It works same as translate(x, 0).
For example:

-webkit-transform: translatex(-150px);
-moz-transform: translatex(-150px);
-o-transform: translatex(-150px);
transform: translatex(-150px);

TranslateY

Similarly, if we want to move the element only on y-axis, we can use translatey property by specifying only value of y-axis. For example:

-webkit-transform: translatey(75px);
-moz-transform: translatey(75px);
-o-transform: translatey(75px);
transform: translatey(75px);

Scale

With the scale property, we can scale an element by width and height. If only one value is specified, the scaling will be proportional.

The syntax of the scale is

scale(width, height)

Example

-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);

This example will scale the image to 1.1 proportion both to width and height.

ScaleX

If we want to scale only width of the element, we can use scalex property.

-webkit-transform: scalex(1.1);
-moz-transform: scalex(1.1);
-o-transform: scalex(1.1);
transform: scalex(1.1);

ScaleY

Similarly, we can scale the height of an element usng scaley.

For example

-webkit-transform: scaley(1.1);
-moz-transform: scaley(1.1);
-o-transform: scaley(1.1);
transform: scaley(1.1);

Skew

With the skew property, we can distort the elements by a specified angle from the x-axis and y-axis. The skew property works same as same as the skew transform tool in Photoshop.

The syntax of skew is

skew(x, y)

The values can be degrees, turns or grads.

For example

-webkit-transform: skew(15deg,  5deg);
-moz-transform: skew(15deg,  5deg);
-o-transform: skew(15deg,  5deg);
transform: skew(15deg,  5deg);

SkewX

With the skewx property, only x-axis is specified. It is same as declaring skew(x, 0).

For example

-webkit-transform: skewx(25deg);
-moz-transform: skewx(25deg);
-o-transform: skewx(25deg);
transform: skewx(25deg);

SkewY

Similarly, we can use skewy property to distort an element on y-axis. With this property, only y-axis is specified and it is same as declaring skew(0, y).

For example

-webkit-transform: skewy(15deg);
-moz-transform: skewy(15deg);
-o-transform: skewy(15deg);
transform: skewy(15deg);

Rotate

We can rotate an element to an angle from the point of origin with the rotate property.
The syntax of the rotate property is

rotate(degrees)

For example

-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);

Tested with:

If you have any questions, please feel free to leave a comment.