Transform operations

Supported by the IE 9, Mozilla, Chrome, Safari and Opera

1. Rotate()
2. Translate()
3. Scale()
4. Skew()
5. Matrix()

rotate() method

			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 */
		

translate() method

This function causes to move the element from iths original position to specified x and y parameter

			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 */
		

more :
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

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.

			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 */
		

more :
scaleX(n) - Defines a 2D scale transformation, changing the element's width
scaleY(n) - Defines a 2D scale transformation, changing the element's height

skew() method

Using this method, element turned on given angle on the basis of x and y parameters

			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 */

		

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

Matrix()

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

			transform:matrix(1,0.25,-0.25,1,0,0);
			-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 */