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

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.