CSS3 2D Transforms, TutorialsPoint, CSS3 2D Transforms Tutorial

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.

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

SkewY()

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

CSS3 Tutorial