Hello Readers!

If you wish to give your HTML elements an effect this an be achieved by using css transform property. The CSS transform property allows us to visually manipulate an element by rotating, skewing, translating, or scaling. This property applies a 2D or 3D transformation to an element.

Syntax:

transform: none | transform-functions | initial | inherit;

Values:

• Scale( ) : the scale method affects the size of the element ,i.e, it increases or decreases the size of an element according to the parameters given for the width and height. It is also a shorthand function fro the scaleX( ) or scaleY ( ) functions.
  Example:

  div{transform:scale(4,5);}

• Translate( ) : the translate method moves an element sideways or up and down, i.e, according to the given parameters for the X-axis and the Y-axis.
  Example:

  div{transform:translate(20px,40px);}

• SkewX( ) and SkewY( ) : method tilts the element along the X or Y axis by the given angle.
  Example:

  div{transfrom:skewX(60deg); transfrom:skewY(40deg);}

• Rotate( ) : method is used to rotate the element clockwise or counter clockwise according to the given degree.
  Example:

  div{transfrom:rotate(180deg);}