css3 2d transform

the css3 transformations module basically allows us to transform an element to a certai extent such as translating, scaling, rotating, skewing.

the official syntax is transform:method(value).

Css3 transform browser support

propertybrowser support
transform

internet explorer 9, firefox,  chrome,  opera,  safari support the transform property.

css3 transform syntax for all major browsers :-

         
          transform: method(value)    /*   w3c official syntax.  */ 
   -ms-transform:  method(value)     /* internet explorer 9.0+ .  */ 
     -o-transform:  method(value)     /* opera 10.5+    */ 
 -moz-transform:  method(value)     /*firefox 3.6+    */ 
-webkit-transform:  method(value)     /* chrome/safari 3.2+    */ 

also, the method we are referring to above is the transform-function, which could be replaced with one of the following:translate()scale(),  rotate(),  or skew().


2D transform

css3 provide number of methos for transform property.

  • translate(value)
  • rotate(value)
  • scale(value)
  • skew(value)
  • matrix(value)

Css transform:rotate()  method.

the rotate transform function rotates the element around the point of origin and as with skewing is specifies in degree.a negative values will rotate the element anti-clockwise.

the rotation will use the polar coordinates which is expressed in degrees that range from 0 to 360.

Css3 2Dtransform ratate

tansform: rotate(angle);

the rotate box  
transform:rotate(30deg);

Css3 2d transform:rotate() example

  <html>  
         
         <head>
         
           <title>rotate boxes. </title>
           
         <style   type="text/css">
         
   .rotate_64deg {
   
                  width:200px;  height:120px ;
                  
         		  border:2px inset lime ;
         		   
         		  background-color:#12eeaa ;
         		  
         	      font-size:25px ;
                   
             	  -webkit-transform:rotate(64deg) ;         	       
                   
                  -moz-transform:rotate(64deg);
                 
                  -ms-transform:rotate(64deg); 
                  
             	  -o-transform:rotate(64deg) ;

         		  transform:rotate(64deg) ;
         		  
     </style> </head>
     
  <body> <div class="rotate_64deg" >
  
         <p>transform:rotate(60deg); </p>
         
    </div>
         
 </body> </html>

Css3 transform:translate() method

the translate function moves the contents of an element to the left or right,upward and downwards.

translate takes one or two comma separated values x and y.the x value pointed the horizontal position of an element.y value points the vertical position of an element.

css3 2Dtransform translate method

Css3 transform:translate method example

         <style   type="text/css">
         
  .translate {
  
                width:200px;  height:120px;
                
         		border:2px inset lime;
         		 
         		background-color:#12eeaa;
         		
         		font-size:25px;
         		
         		transform:translate(100px, 250px);
         		
         		-o-transform:translate(100px, 250px);
         		
         		-ms-transform:translate(100px, 250px);
         		
         		-moz-transform:translate(100px, 250px);
         		
         		-webkit-transform:translate(100px, 250px);
         		
       </head>

transform:skew() method

the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal(x-axis) and the vertical (y-axis) lines.

transform:skew()

transform:skew()

 

css3 transform:skew method example

         <style   type="text/css">
         
   .translate {
         
         		width:200px;  height:130px
         		
         		border:1px inset lime
         		 
         		background-color:#3a4b9c
         		
         		font-size:25px
                 
                -moz-transform:skew(31deg, 21deg)
         		
                -webkit-transform:skew(31deg, 21deg)
 
                -o-transform:skew(31deg, 21deg)
         		
                -ms-transform:skew(31deg, 21deg)
         		
          transform:skew(31deg, 21deg)
         		
    </head>

Css3 transform:scale() method

the scale method allows us to enlare or reduce the elements from its actual size.depending on the parameters given for the width(x-axis) and the height(y-axis).we do'n specify the unit with the value of scale method.



transform:scale()

transform:scale()

    

transform:scale method example

         <style   type="text/css">
         
  .translate {
  
       		  width:200px;  height:130px
       		  
         		border:1px inset lime
         		 
         		background-color:#3a4b9c
         		
         		font-size:25px
         		
         		transform:scale(1.5, 1.5)
         		
         		-o-transform:scale(1.5,1.5)
         		
         		-ms-transform:scale(1.5,1.5)
         		
         		-moz-transform:scale(1.5, 1.5)
         		
         		-webkit-transform:scale(1.5, 1.5)
         		
   </style>  </head>

Css3 transform:matrix() method

transform:matrix() method combines all the 2D transform methods into one.using this method we can rotate(), skew(), scale(), translate() an element.

css3 transform matrix method

matrix effect on image.

    <style   type="text/css">
    
  .translate {
  
  		        width:200px;  height:150px;
  		       
         		border:2px dotted lime;
                 
                -webkit-transform:matrix(-0.65,0.50,1.75,0.80,120,40); 
                
                -moz-transform:matrix(-0.65,0.50,1.75,0.80,120,40);
                
              	-o-transform:matrix(-0.65,0.50,1.75,0.80,120,40);
         		
             	-ms-transform:matrix(-0.65,0.50,1.75,0.80,120,40);
         		 
      transform:matrix(-0.65,0.50,1.75,0.80,120,40);
         		
     </style> </head>

note:-the  transform property is not limited to handle only one method, in fact we can include multiple methods in single declaration, such as--

transform:   rotate(45deg)  translate(100,20) skew(30deg, 20deg);

propertydescriptioncss
transformspecifies a 2d or 3d transformation to an element.css3
transform-originhold the position of transformed elements.css3
transform methodsdescription
translate(x,y)specifies a 2d translation by the vector [tx,ty].
translatex(n)translates the element by the given amount along the x axis.
translatey(n)translates the element by the given amount along the y axis.
rotate(angle)defines a 2d rotation, the angle is specified in the parameter.
skew(x-angle,y-angle)skews the element around the x and y axes by the specified angles.
skewx(angle)skew the element around the x axis by the given angle.
skewy(angle)skey the element around the y axis by the given angle.
scale(x,y)defines a 2d scale transformation,chang the width and height of an element.
scalex()operation on the element widths.
scaley()operation on the element heights.
matrix(n,n,n,n)defines a 2d transformation