CSS3 2D TRANSFORM

CSS3 2D TRANSFORM

TRANSFORM= it is an effect of css3. By this effect we can change the shape, size and position of an element.

2D transform list below

Translate

Rotate

Scale

Skew

Matrix

Translate

By this method we can move the element from current position 

Example:-

Div {transform: translate (20px, 30px) ;}

(Note: 20px  from left and 30pxform top)

Rotate

By this method we can change the rotation for an element in digress.

Example:-

Div {transform: Rotate (30deg) ;}

scale

By scale method we can increase or decrease the size of an element.

Example:-

Div {transform: scale (2,3) ;}

(Note: 2 for width and 3 for height)

Skew

by this method we can skew the element in digress along to the x-axis and y-axis.

Example

Div{transform:skew (20deg,10deg);}

Matrix

By this matrix method we can use all  2d transform  method in one. Like this…

 Example

Div{ transform:matrix(1,0.3,0.4,0,1.2,3);}

Note: (1 for scale width, 0.3 for rotate clockwise ,0.4  opposite clockwise, 0 for scale height, 1.2 for translate left and 3 for translate top)

I hope you understand the  CSS3 2D transform Effect….

Thanks

Emraan Ali