# Transform operations

## rotate() method

```			transform: rotate(-10deg);
-ms-transform: rotate(-10deg); /* IE 9 */
-webkit-transform: rotate(-10deg); /* Safari and Chrome */
-o-transform: rotate(-10deg); /* Opera */
-moz-transform: rotate(-10deg); /* Firefox */
```
Rotate this by -10 degree means 370 degree

## translate() method

#### This function causes to move the element from iths original position to specified x and y parameter

```			transform: translate(300px,40px);
-ms-transform: translate(300px,40px); /* IE 9 */
-webkit-transform: translate(300px,40px); /* Safari and Chrome */
-o-transform: translate(300px,40px); /* Opera */
-moz-transform: translate(300px,40px); /* Firefox */
```
Transform this from its original position

more :
translateX(n) - Defines a 2D translation, moving the element along the X-axis
translateY(n) - Defines a 2D translation, moving the element along the Y-axis

## scale() Method

#### This method is used to increase or decrease the size of the element. any value less than 1 means decrease and any value greater than 1 means increase in size.

```			transform: scale(1,2);
-ms-transform: scale(1,2); /* IE 9 */
-webkit-transform: scale(1,2); /* Safari and Chrome */
-o-transform: scale(1,2); /* Opera */
-moz-transform: scale(1,2); /* Firefox */
```
Scale faactor for x = 1 and y is 2

more :
scaleX(n) - Defines a 2D scale transformation, changing the element's width
scaleY(n) - Defines a 2D scale transformation, changing the element's height

## skew() method

#### Using this method, element turned on given angle on the basis of x and y parameters

```			transform: skew(20deg,10deg);
-ms-transform: skew(20deg,10deg); /* IE 9 */
-webkit-transform: skew(20deg,10deg); /* Safari and Chrome */
-o-transform: skew(20deg,10deg); /* Opera */
-moz-transform: skew(20deg,10deg); /* Firefox */

```
Skew this block

more :
skewX(angle) - Defines a 2D skew transformation along the X-axis
skewY(angle) - Defines a 2D skew transformation along the Y-axis

## Matrix()

#### This is the combination of all above methods and takes 6 parameters

```			transform:matrix(1,0.25,-0.25,1,0,0);
-ms-transform:matrix(1,0.25,-0.25,1,0,0); /* IE 9 */
-moz-transform:matrix(1,0.25,-0.25,1,0,0); /* Firefox */
-webkit-transform:matrix(1,0.25,-0.25,1,0,0); /* Safari and Chrome */
-o-transform:matrix(1,0.25,-0.25,1,0,0); /* Opera */
```

This is the text- style manipulated by the matrix() method