CSS3 Transforms:2D

August 31, 2016 by Arti Khedkar

Filed under HTML & CSS

Last modified September 22, 2016

CSS3 Transforms:2D

 

The Transformation module is a tremendous addition in CSS3, it helps element to rotate, translate, scale and crook element. It is an effect that element change shape size and position also.  In that Transforms 2D and 3D CSS3 transforms is available. Now we have to see 2D transformation  in that article.

css3 transformation 2D

css3 transforms 2D

 

Browser Support for 2D Transforms

 

The opera-mini, Mozilla Firefox, chrome, internet explorer browsers are support to the 2D transform.

b1 b2 b3 b4

 

CSS3 2D gave chance to decorate and animate the HTML components.  Even in that have more features to decorate that more. Below are the functions of 2D transformed :-

 

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()
  1. translate():

This method can move the element from one position to another i.e. from x-axis to y-axis.

Example:-

div {

width: 100px;

height: 100px;

transform: translate(100px, 250px);

}

 

  1. Rotate():

 

The rotate() uses polar coordinates. And value is stated in degrees.

Example:-

div {

width: 100px;

height: 100px;

transform: rotate(30deg);

}

  1. Scale():

 

The scale() uses to increase and decrease size of element according to the parameters given for the width and height.

Example:-

div {

width: 100px;

height: 100px;

transform: scale(1.5);

}

  1. Skew():

 

The skew() uses to crook an  element along the X and Y-axis by the given angles.

 

Examples:-

 

div {

width: 200px;

height: 100px;

transform: skew(30deg, 10deg);

}

  1. Matrix():

 

The matrix() uses to bind all the functions together in one.

 

Examples:-

div {

width: 100px;

height: 100px;

transform: translateX(100px) rotate(45deg);

}

 

 

 

 

 

Leave a Comment