CSS3 - 2d Transforms


Advertisements


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>

It will produce the following result −

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>

It will produce the following result −

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>

It will produce the following result −

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>

It will produce the following result −

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>

It will produce the following result −

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>

It will produce the following result −



Advertisements