Complete CSS 3 Tutorial – Transform Operations

Author posted by Jitendra on Posted on under category Categories HTML and tagged as Tags , with Leave a comment on Complete CSS 3 Tutorial – Transform Operations

Complete CSS 3 Tutorial – Transform Operations – rotate, translate, scale, skew and matrix methods with Live Demo and source code

Cascading Style Sheet (CSS) is the language used by all the web languages like ASP.Net, PHP, JSP or Velocity (Basically HTML) to control the display style of the elements without changing the code. With the help of CSS we can control the border width, color, background color, background image, font and so on.

With the help of CSS 3 other than just style now we can even animate, translate and do lots of stuff which were not possible by the CSS 2 and needed the help of other JavaScript library like JQuery UI.

In this tutorial we are going to learn different transform operations supported by the CSS 3.

The Transform operations are supported by IE 9, Mozilla, Google Chrome, Safari and Opera.

Live Demo – Click Here.

1. rotate() method

Using this method, we can rotate any element for the specified degree from 0 to 360 having positive or negative value.


transform: rotate(-10deg);
-ms-transform: rotate(-10deg); /* IE 9 */
-webkit-transform: rotate(-10deg); /* Safari and Chrome */
-o-transform: rotate(-10deg); /* Opera */
-moz-transform: rotate(-10deg); /* Firefox */

In above code snippet, we have to supply the degree to which element should be rotated. Instead of -10, we can also supply the 350 which will give the same result.

CSS 3 Tutorial Rotate
CSS 3 Tutorial Rotate

In CSS3, we have to explicitly specify the filters for different browsers so that they can understand the property.

  • -ms-” stands for Microsoft Internet Explorer
  • -webkit-” stands for Safari and Chrome
  • -o-” stands for Opera
  • -moz-” stands for Mozilla

2. translate() method

This function causes to move the element from iths original position to specified x and y parameter. This method requires two parameters in which first means transform from x axis and second means transform from y axis.

Other Methods:
translateX(n) – Defines a 2D translation, moving the element along the X-axis
translateY(n) – Defines a 2D translation, moving the element along the Y-axis

CSS 3 Tutorial Translate
CSS 3 Tutorial Translate

Example :

transform: translate(300px,40px);
-ms-transform: translate(300px,40px); /* IE 9 */
-webkit-transform: translate(300px,40px); /* Safari and Chrome */
-o-transform: translate(300px,40px); /* Opera */
-moz-transform: translate(300px,40px); /* Firefox */

3. scale() Method
This method is used to increase or decrease the size of the element. any value less than 1 means decrease and any value greater than 1 means increase in size. This method also requires two parameter, first is for the width (x-axis) and second for the height (y-axis).

CSS 3 Tutorial Scale
CSS 3 Tutorial Scale
transform: scale(1,2);
-ms-transform: scale(1,2); /* IE 9 */
-webkit-transform: scale(1,2); /* Safari and Chrome */
-o-transform: scale(1,2); /* Opera */
-moz-transform: scale(1,2); /* Firefox */

4. skew() method
Using this method, element turned on given angle on the basis of x and y parameters. This method requires two parameters, first is the angle for x-axis and second is angle for y-axis.

CSS 3 Tutorial Skew
CSS 3 Tutorial Skew

Other Methods:
skewX(angle) – Defines a 2D skew transformation along the X-axis
skewY(angle) – Defines a 2D skew transformation along the Y-axis

transform: skew(20deg,10deg);
-ms-transform: skew(20deg,10deg); /* IE 9 */
-webkit-transform: skew(20deg,10deg); /* Safari and Chrome */
-o-transform: skew(20deg,10deg); /* Opera */
-moz-transform: skew(20deg,10deg); /* Firefox */

5. matrix()

This is the combination of all above methods and takes 6 parameters.

CSS 3 Tutorial matrix
CSS 3 Tutorial matrix

Read in detail about matrix() method of css3

-ms-transform:matrix(1,0.25,-0.25,1,0,0); /* IE 9 */
-moz-transform:matrix(1,0.25,-0.25,1,0,0); /* Firefox */
-webkit-transform:matrix(1,0.25,-0.25,1,0,0); /* Safari and Chrome */
-o-transform:matrix(1,0.25,-0.25,1,0,0); /* Opera */

Related posts