Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

CSS 3

Learn step by step



CSS3 2D Transforms

A transform is such a property of CSS3, which is used for changing the actual form of the element. With this feature of CSS3 You can change the shape, size and position of an element. CSS3 2D Transform has introduced mainly five types of methods that has been described as follows:

CSS3 2D transform gives you more freedom to decorate and animate HTML components. You have even more features to decorate text and more animation options for decorating <div> elements.

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

Using the translate() function, you can move the div and text from their original position to any x-y co-ordinate without affecting other HTML components.


div{ transform: translate(20px,20px); }

The above code translates the div element 20px in x-direction and 20px in the y-direction.

Output

NOTE: x-y coordinates positioning in browsers is not same as used in geometry. A positive x value implies moving the object towards the right direction while a positive y value means moving it towards the bottom in y-direction. (0,0) co-ordinates refer to the top left corner of the browser.

For browsers like Opera, Chrome and older Firefox, you have to use -webkit-, -moz-, and -o- prefixes to the transform property. The CSS3 transform is not fully accepted by all browsers, but major browsers do support them with one of the above vendor provided prefixes.

Rotate

The rotate transform function rotates a specified HTML element to a given degree. The rotation is clockwise and starts from 0deg to 360deg. The rotation is done in the x-y plane.


div{ transform: rotate(30deg); }

Output

Scale

As the name suggests, it scales the old div to the new size as specified. This scaling takes place in both x and y direction. You can control the amount of scaling by specifying values, as parameters, to scale() function.


div{ transform: scale(2,4); }

Output

Skew

When a skew transform function is applied to an element, the element bends to a specified amount as provided in the parameters list. You have to specify the angle value for x-direction as well as for the y-direction.


div{ transform: skew(30deg,20deg); }

Output

Matrix

The work of matrix transform function is to combine all the above 2D transform function into one property. The values are in the form of linear transformation matrix.


div{ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); }

Example:-



Related Videos