Select Chapter →

### CSS3 Tutorial

# CSS3 Transform

CSS3 Transform is used to manipulate the elements.It can be used to rotate, skew, scale,matrix and translate the elements.Like rotate the element on mouse over or tilt the element on mouse over etc.

#### Rotate

It is used to rotate the element by giving the value in deg

transform:rotate(10deg);

This will rotate the box 10 deg in anti clockwise

#### Skew

It is used to tip the horizontal and vertical

transform:skew(30deg,20deg);

This will tip over the x-axis by 30 degrees on the y-axis by 20 degrees

#### Scale

It is used to change the width and height of an element

transform:scale(2);

This will increase the dimensions by 2 times.You can a also use value less than "1" such as "0.5" it will decrease the dimmension by 2 times.

Or you can use width and height seperately.

transform:scale(2,4);

This will increase the horizontal dimension by 2 times and vertical dimension by 4 times.You can a also use value less than "1" such as "0.5" it will decrease the dimmension by 2 times.

#### Translate

It is used to move the element horizontal and vertical

transform:translate(50px,100px);

This will move the box 50px right and 100px down

#### Matrix

It is used to combine all the 2D transform method into one.The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

transform: matrix(2,-0.35,0.35,2,0,0);

This will move the box 50px right and 100px down

#### 2D Transform Methods

**rotate(angle)**is used to rotate**skewY(angle)**is used to skew along Y axis**skewX(angle)**is used to skew along X axis**skew(X-angle,Y-angle)**is used to skew along X axis and Y axis both**scaleY()**is used to scale vertically(height).**scaleX()**is used to scale horizontally(width).**scale(x,y)**is used to scale both in horizontal and vertical dimension.**translateY()**is used to translate along Y axis**translateX()**is used to translate along X axis**translate(x,y)**is used to translate along X axis and Y axis both**matrix**is used to define combined transformation

#### 3D Transform Methods

**rotate3d(x,y,z)**is used to rotate 3D**rotateZ(angle)**is used to rotate along z-axis**scale3d(x,y,z)**is used to scale 3D**scaleZ(angle)**is used to scale along z-axis**translate3d(x,y,z)**is used to traslate 3D**translateZ(angle)**is used to translate along z-axis**matrix3d**is used to define combined transformation in 3D,using a 4x4 matrix of 16 values