ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

13-CSS 2D Transform

2D Transforms are used in CSS in order  to re-change the paragraph or data  structure as translate, rotate, scale, and skew and more yet to be discovered.

Run these codes to actually get an idea.

  1.    <head>
  2.    
  3.       <style>
  4.          div {
  5.             width: 400px;
  6.             height: 80px;
  7.             background-color: blue;
  8.             border: 1px solid red;
  9.          }
  10.          div#mybad {
  11.             /* IE 9 */
  12.             -ms-transform: rotate(20deg);
  13.            
  14.             /* Safari */
  15.             -webkit-transform: rotate(20deg);
  16.            
  17.             /* Standard syntax */
  18.             transform: rotate(20deg);
  19.          }
  20.       </style>
  21.      
  22.    </head>
  23.    <body>
  24.       <div>
  25.       Hello from ITSOURCECODE.COM
  26.       </div>
  27.      
  28.       <div id="mybad">
  29.             Hello from ITSOURCECODE.COM
  30.  
  31.       </div>
  32.    </body>
  33. </html>

For different rotation  you can check the following the following code:

  1.    <head>
  2.    
  3.       <style>
  4.          div {
  5.             width: 400px;
  6.             height: 120px;
  7.             background-color: blue;
  8.             border: 1px solid red;
  9.          }
  10.          div#mybad {
  11.             /* IE 9 */
  12.             -ms-transform: rotate(-30deg);
  13.          
  14.             /* Safari */
  15.             -webkit-transform: rotate(-30deg);
  16.          
  17.             /* Standard syntax */  
  18.             transform: rotate(-30deg);
  19.          }
  20.       </style>
  21.      
  22.    </head>
  23.    <body>
  24.       <div>
  25.      Hello from ITSOURCECODE.COM
  26.  
  27.       </div>
  28.      
  29.       <div id="mybad">
  30.       Hello from ITSOURCECODE.COM
  31.  
  32.       </div>
  33.    </body>
  34. </html>

 For SKEW X axis wise you can have the following code:

  1.    <head>
  2.    
  3.       <style>
  4.          div {
  5.             width: 400px;
  6.             height: 120px;
  7.             background-color: blue;
  8.             border: 1px solid red;
  9.          }
  10.          div#mybad {
  11.             /* IE 9 */
  12.             -ms-transform: skewX(30deg);
  13.          
  14.             /* Safari */
  15.             -webkit-transform: skewX(30deg);
  16.          
  17.             /* Standard syntax */  
  18.             transform: skewX(30deg);
  19.          }
  20.       </style>
  21.      
  22.    </head>
  23.    <body>
  24.       <div>
  25.      Hello from ITSOURCECODE.COM
  26.  
  27.       </div>
  28.      
  29.       <div id="mybad">
  30.       Hello from ITSOURCECODE.COM
  31.  
  32.       </div>
  33.    </body>
  34. </html>

NOTE:  for Skew Y axis just changes the above

As Skew Y

That’s it.

 

Facebook Comments

Check Your Domain Ranking

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!