CSS3 2D transform- making easy web design

CSS3 2D transform:
CSS3 transform the elements of the original size that we can use to change the transform property. This feature of CSS3 elements of the Shape, Size and position can change. CSS3 2D transform 5 has introduced such a system. Like translate (), rotate (), scale (), skew () and matrix (). Using 2D or 3D transformation can transform your elements. যা Which is described below –

Browser Support:
Prefix-ms- is required for Internet Explorer9.
Firefox is required for Prefix-moz-
Chrome and Safari are required for Prefix-webkit-
Opera needs of the Prefix-O-

Translate () method :
According to him, the parameter is used to move objects.
There are two types of parameters such as – left (x-axis) and top (y-ayis).
Translate the left (X-axis) and (Y-axis) position. According to the given parameters of element changes its position.

Example: Value translate (50px, 100px) element left 50 pixels and 100 pixels from the top moves.


This method can be used to move objects up to his standards. You can use two types of values. For example – positive (clockwise rotation at speed) and negative (as opposed to clockwise).
Example: Value rotate (30deg) element turn 30 degrees clockwise.


scale() method:
In this way, depending on the value of the parameter can be increased to reduce the size of the object. width and height of these two types of value can be provided. One is the width (x-axis) and the other is the height (y-axis). For example – value scale (2,4) width and height to 4 times its original size is doubled.

skew() method:
In this way is based on the parameters provided in the value of the object’s angle can be changed. There are two types of value to width and height. One of the horizontal (x-axis) and the other is the vertical (y-axis). For example – value skew (30deg, 20deg) element the X-axis of 30 degree and Y-axis and 20deg removed.

matrix() method:
All the above changes to the transformation of this method is used. The metric system is a unified system for all 2D transform. you can provide a 6 value for the parameter. Completed the six parameters of the metric system in which mathematical element rotate, scale, move (translate) and skew can be.

Leave a Reply

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