CSS3 2D Transforms
CSS3 supports transform property. This transform property facilitates you to translate, rotate, scale, and skews elements.

The CSS 2D transforms are used to re-change the structure of the element as translate, rotate, scale and skew etc.

Following is a list of 2D transforms methods:

translate(x,y): It is used to transform the element along X-axis and Y-axis.
translateX(n): It is used to transform the element along X-axis.
translateY(n): It is used to transform the element along Y-axis.
rotate(): It is used to rotate the element on the basis of an angle.
scale(x,y): It is used to change the width and height of an element.
scaleX(n): It is used to change the width of an element.
scaleY(n): It is used to change the height of an element.
skewX(): It specifies the skew transforms along with X-axis.
skewY():It specifies the skew transforms along with Y-axis.
matrix(): It specifies matrix transforms.

Translate() method Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transform</title>
<style type="text/css"> 
.main_div{
    width: 300px;
    height: 100px;
    background-color: #F30;
    border: 1px solid #0099da;
    -ms-transform: translate(10px,20px); /* IE 9 */
    -webkit-transform: translate(10px,20px); /* Safari */
    transform: translate(10px,20px); /* Standard syntax */
}
</style>
</head>
<body>
 
<div class="main_div">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</div>
 
</body>
</html>
Output :
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
Rotate() method Example :
<html>
   <head>
    <title>Rotate Methode</title>
      <style type="text/css">
         .main_rotation{
            width: 300px;
            height: 100px;
            background-color: #F30;
            border: 1px solid #0099da;
         }
         div#myDiv_1 {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Standard syntax */
            transform: rotate(20deg);
         }
      </style>
      
   </head>
   <body>
      <div class="main_rotation">
      www.freetimelearning.com.
      </div>
      
      <div class="main_rotation" id="myDiv_1">
      www.freetimelearning.com.
      </div>
   </body>
</html>
Output :
www.freetimelearning.com.
www.freetimelearning.com.
Scale() method Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transform Scale()</title>

<style type="text/css"> 
.scale_transform{
    margin: 55px 100px;
    width: 200px;
    height: 100px;
    background-color: #F30;
    border: 1px solid #0099da;
    border: 1px solid #0099da;
    -ms-transform: scale(2,2); /* IE 9 */
    -webkit-transform: scale(2,2); /* Safari */
    transform: scale(2,2); /* Standard syntax */
}
</style>

</head>
<body>
 
<div class="scale_transform">
www.freetimelearning.com
</div>
 
</body>
</html>
Output :
www.freetimelearning.com
SkewX() and SkewY() method Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transform ScaleX() and ScaleY()</title>

<style type="text/css"> 
.skew_x{
    width: 300px;
    height: 100px;
    background-color: #F30;
    border: 1px solid #0099da;
color:#FFF;
}
 
.my_skew_x{
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
background:#F30;
color:#FFF;
width: 300px;
    height: 100px;
margin:5px 20px;
border: 1px solid #000;
}
 
.skew_y{
    width: 300px;
    height: 100px;
    background-color: #F30;
    border: 1px solid #0099da;
color:#FFF;
}
 
.my_skew_y{
    -ms-transform: skewY(20deg); /* IE 9 */
    -webkit-transform: skewY(20deg); /* Safari */
    transform: skewY(20deg); /* Standard syntax */
background:#F30;
color:#FFF;
width: 300px;
    height: 100px;
border: 1px solid #000;
}
</style>

</head>
<body>

<h4>SkewX()</h4>
<div class="skew_x">
www.freetimelearning.com
</div>
<div class="my_skew_x">
www.freetimelearning.com
</div>
 
<h4>SkewY()</h4>
<div class="skew_y">
www.freetimelearning.com
</div>
<div class="my_skew_y">
www.freetimelearning.com
</div>
 
</body>
</html>
Output :

SkewX()

www.freetimelearning.com
www.freetimelearning.com

SkewY()

www.freetimelearning.com
www.freetimelearning.com
Matrix() method Example :
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Transform Matrix() Method</title>

<style type="text/css"> 
.matrix{
    width: 300px;
    height: 100px;
    background-color: #F30;
    border: 1px solid #0099da;
}
 
.matrix_2{
    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
width: 300px;
    height: 100px;
    background-color: #F30;
    border: 1px solid #0099da;
}
 
.matrix_3{
    -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
    -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */
    transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
width: 300px;
    height: 100px;
    background-color: #F30;
    border: 1px solid #0099da;
}
</style>

</head>
<body>
 
<div class="matrix">
www.freetimelearning.com
</div>
<div class="matrix_2">
www.freetimelearning.com
</div>
<div class="matrix_3">
www.freetimelearning.com
</div>
 
</body>
</html>
Output :
www.freetimelearning.com
www.freetimelearning.com
www.freetimelearning.com