Transform|CSS|learning-a.com

With transform, you may change the location, shape, and size of an element.

translate: move from one location to another location
rotate: rotate around
scale: enlarge or decrease size
skew: skew the shape along x-axis and y-axis
matrix: combines all the above transform methods into one.

All the above action need a origin point. The default value of it is the center of a shape. For example, rotate a square, the default origin point is the center of the square. You may specify a origin point at coordinate(10px,20px) with code transform-origin:10px 20px;; then you may rotate the square around the specified origin point.

The browsers below support transform: IE9.0+, Firefox 26.0+, Chrome 31.0+, Safari 5.1+, Opera 19.0+, iOS 3.2+, Android 2.1+. For Safari, Chrome, and Opera, you need to add prefix -webkit- before transform, like -webkit-transform: ;. For IE9, you need to add prefix -ms- before transform.

Translate

Standard syntax: transform: translate(x,y);. You can just give one parameter x or y for translate(x,y), so the movement is along either X-axis or Y-axis. You can also use translateX or translateY instead translate to do the same thing.

In the example below, the green original rectangle is at the original reference location; and the red rectangle is moved by translate.

<html>
<head>
<style> 
	div #originalTrans{
		position:absolute;

		height:50px; width:200px;
		background-color: green;
		z-index:-1;
	}

	div #translate
	{
		height:50px; width:200px;
		background-color: red;
		-ms-transform: translate(30px,5px);
		-webkit-transform: translate(30px,5px);
		transform: translate(30px,5px);
	}
</style>

</head>
<body>
<div id="originalTrans"></div>
<div id="translate"></div>
</body>
</html>

Rotate

Standard syntax: transform: rotate(angle);. The rotation is clockwise.

In the example below, the green original square is at the original reference location; and the red square is rotated by 30 degree with rotate.

<html>
<head>
<style> 
	div #originalRotate{
		position:absolute;

		height:50px; width:50px;
		background-color: green;
		z-index:-1;
	}

	div #rotate
	{
		height:50px; width:50px;
		background-color: red;
		-ms-transform: rotate(30deg); /* IE 9 */
		-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
		transform: rotate(30deg);
	}
</style>

</head>
<body>
<div id="originalRotate"></div>
<div id="rotate"></div>
</body>
</html>

Scale

Standard syntax: transform: scale(x, y);. Parameter x indicates x times as large as original length along x-axis. Parameter y indicates y times as large as original length along y-axis.

In the example below, the green original square is at the original reference location; and the red rectangle is 0.5 times x-length(0.5*50px=25px) and 0.6 times y-length(0.6*50px=30px).

<html>
<head>
<style> 
	div #originalScale{
		position:absolute;

		height:50px; width:50px;
		background-color: green;
		z-index:-1;
	}

	div #scale
	{
		height:50px; width:50px;
		background-color: red;
		-ms-transform: scale(0.5,0.6); /* IE 9 */
		-webkit-transform: scale(0.5,0.6); /* Chrome, Safari, Opera */
		transform: scale(0.5,0.6);
	}
</style>

</head>
<body>
<div id="originalScale"></div>
<div id="scale"></div>
</body>
</html>

Skew

Standard syntax: transform: skew(Xdeg, Ydeg);. Parameter Xdeg indicates skewing degrees along x-axis. Parameter Ydeg indicates skewing degrees along y-axis.

<html>
<head>
<style> 
	div #originalskew{
		position:absolute;

		height:50px; width:50px;
		background-color: green;
		z-index:-1;
	}

	div #skew
	{
		height:50px; width:50px;
		background-color: red;
		-ms-transform: skew(20deg,10deg); /* IE 9 */
		-webkit-transform: skew(20deg,10deg); /* Chrome, Safari, Opera */
		transform: skew(20deg,10deg);
	}
</style>

</head>
<body>
<div id="originalskew"></div>
<div id="skew"></div>
</body>
</html>