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

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  

Css3 2d transform:rotate() example

           <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) ;         	       
             	  -o-transform:rotate(64deg) ;

         		  transform:rotate(64deg) ;
     </style> </head>
  <body> <div class="rotate_64deg" >
         <p>transform:rotate(60deg); </p>
 </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;
         		transform:translate(100px, 250px);
         		-o-transform:translate(100px, 250px);
         		-ms-transform:translate(100px, 250px);
         		-moz-transform:translate(100px, 250px);
         		-webkit-transform:translate(100px, 250px);

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.




css3 transform:skew method example

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

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 method example

         <style   type="text/css">
  .translate {
       		  width:200px;  height:130px
         		border:1px inset lime
         		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;
     </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);

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