CSS3 2d Transforms

2D transforms are used to re-change the element structure as translate, rotate, scale, and skew

The following table has contained common values which are used in 2D transforms

Values

Description

matrix(n,n,n,n,n,n)

Used to defines matrix transforms with six values

translate(x,y)

Used to transforms the element along with x-axis and y-axis

translateX(n)

Used to transforms the element along with x-axis

translateY(n)

Used to transforms the element along with y-axis

scale(x,y)

Used to change the width and height of element

scaleX(n)

Used to change the width of element

scaleY(n)

Used to change the height of element

rotate(angle)

Used to rotate the element based on an angle

skewX(angle)

Used to defines skew transforms along with x axis

skewY(angle)

Used to defines skew transforms along with y axis

The following examples are shown the sample of all above properties

Rotate 20 degrees

Box rotation with 20 degrees angle as shown below

<html>

   <head>

  

      <style>

         div {

            width: 300px;

            height: 100px;

            background-color: pink;

            border: 1px solid black;

         }

         div#myDiv {

            /* IE 9 */

            -ms-transform: rotate(20deg);

           

            /* Safari */

            -webkit-transform: rotate(20deg);

           

            /* Standard syntax */

            transform: rotate(20deg);

         }

      </style>

     

   </head>

   <body>

      <div>

      Tutorials point.com.

      </div>

     

      <div id="myDiv">

      Tutorials point.com

      </div>

   </body>

</html>

 

Rotate -20 degrees

Box rotation with -20 degrees angle as shown below

<html>

   <head>

  

      <style>

         div {

            width: 300px;

            height: 100px;

            background-color: pink;

            border: 1px solid black;

         }

         div#myDiv {

            /* IE 9 */

            -ms-transform: rotate(-20deg);

        

            /* Safari */

            -webkit-transform: rotate(-20deg);

        

            /* Standard syntax */ 

            transform: rotate(-20deg);

         }

      </style>

     

   </head>

   <body>

      <div>

      Tutorials point.com.

      </div>

     

      <div id="myDiv">

      Tutorials point.com

      </div>

   </body>

</html>

 

Skew X axis

Box rotation with skew x-axis as shown below

<html>

   <head>

  

      <style>

         div {

            width: 300px;

            height: 100px;

            background-color: pink;

            border: 1px solid black;

         }

         div#skewDiv {

            /* IE 9 */

            -ms-transform: skewX(20deg);

           

            /* Safari */

            -webkit-transform: skewX(20deg);

           

            /* Standard syntax */ 

            transform: skewX(20deg);

         }

      </style>

     

   </head>

   <body>

      <div>

      Tutorials point.com.

      </div>

     

      <div id="skewDiv">

      Tutorials point.com

      </div>

   </body>

</html>

 

Skew Y axis

Box rotation with skew y-axis as shown below

<html>

   <head>

  

      <style>

         div {

            width: 300px;

            height: 100px;

            background-color: pink;

            border: 1px solid black;

         }

         div#skewDiv {

            /* IE 9 */

            -ms-transform: skewY(20deg);

           

            /* Safari */

            -webkit-transform: skewY(20deg);

           

            /* Standard syntax */ 

            transform: skewY(20deg);

         }

      </style>

     

   </head>

   <body>

      <div>

      Tutorials point.com.

      </div>

     

      <div id="skewDiv">

      Tutorials point.com

      </div>

   </body>

</html>

 

Matrix transform

Box rotation with Matrix transforms as shown below

<html>

   <head>

  

      <style>

         div {

            width: 300px;

            height: 100px;

            background-color: pink;

            border: 1px solid black;

         }

         div#myDiv1 {

            /* IE 9 */

            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);

           

            /* Safari */

            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);

           

            /* Standard syntax */

            transform: matrix(1, -0.3, 0, 1, 0, 0);

         }

      </style>

     

   </head>

   <body>

      <div>

      Tutorials point.com.

      </div>

     

      <div id="myDiv1">

      Tutorials point.com

      </div>

   </body>

</html>

Matrix transforms with another direction

<html>

   <head>

  

      <style>

         div {

            width: 300px;

            height: 100px;

            background-color: pink;

            border: 1px solid black;

         }

         div#myDiv2 {

            /* IE 9 */

            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);

           

            /* Safari */      

            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);

           

            /* Standard syntax */

            transform: matrix(1, 0, 0.5, 1, 150, 0);

         }

      </style>

     

   </head>

   <body>

      <div>

      Tutorials point.com.

      </div>

     

      <div id="myDiv2">

      Tutorials point.com

      </div>

   </body>

</html>