How to Use CSS 2-D Transforms

In CSS3, you can use the transform property, which allows us to easily position, stretch, scale, and rotate elements.

Here's a list of the valid values (functions) for the transform property:

Method	Example
translate	`translate(10px, -20px)` moves the element 10 pixels left and 20 pixels up from its original position; can use `translateX` or `translateY` for horizontal or vertical positioning.
rotate	`rotate(20deg)` rotates the element 20 degrees clockwise; negative values rotate counter-clockwise.
scale	`scale(2,3.5)` stretches the element to be twice as wide and 3.5 times as tall; can also use `scaleX` or `scaleY` to specify horizontal or vertical scaling.
skew<	`skew(10deg, 20deg)` turns the element 10 degrees about the X axis and 20 degrees about the Y axis; can also use `skewX` or `skewY` to control X- and Y-axis skew.
matrix	`matrix(0.75,0.5,-0.5,1.5,20,0)` allows us to specify all of the above methods at once according to a square matrix. See the W3C website (http://www.w3.org/TR/css3-transforms/) for more description of using the `matrix` function (but be sure to dig up a linear algebra textbook for reference).

Let's look at an example that illustrates the use of the transform property:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS3 2D Transforms</title>
	<style type="text/css">
		div.example {
			width: 140px;
			height: 200px;
			background-color: hsl(0, 20%, 70%);
			margin: 0 5px 20px 0;
			padding: 3px 10px;
			text-align: center;
			float: left;
		}
		div.example div {
			width: 50px;
			height: 50px;
			background-color: hsl(0, 20%, 20%);
		}
		div.example code {
			display: block;
			font-size: 0.8em;
			padding: 10px;
		}
		#translate:hover div {
			-webkit-transform: translate(50px, 100px);
			-moz-transform: translate(50px, 100px);
			-ms-transform: translate(50px, 100px);
			-o-transform: translate(50px, 100px);
			transform: translate(50px, 100px);
		}
		#rotate:hover div {
			-webkit-transform: rotate(20deg);
			-moz-transform: rotate(20deg);
			-ms-transform: rotate(20deg);
			-o-transform: rotate(20deg);
			transform: rotate(20deg);
		}
		#scale:hover div {
			-webkit-transform: scale(2.5, 3);
			-moz-transform: scale(2.5, 3);
			-ms-transform: scale(2.5, 3);
			-o-transform: scale(2.5, 3);
			transform: scale(2.5, 3);
		}
		#skew:hover div {
			-webkit-transform: skew(10deg, 30deg);
			-moz-transform: skew(10deg, 30deg);
			-ms-transform: skew(10deg, 30deg);
			-o-transform: skew(10deg, 30deg);
			transform: skew(10deg, 30deg);
		}
		#matrix:hover div {
			-webkit-transform: matrix(0.75,0.5,-0.5,1.5,20,0);
			-moz-transform: matrix(0.75,0.5,-0.5,1.5,20,0);
			-ms-transform: matrix(0.75,0.5,-0.5,1.5,20,0);
			-o-transform: matrix(0.75,0.5,-0.5,1.5,20,0);
			transform: matrix(0.75,0.5,-0.5,1.5,20,0);
		}
	</style>
</head>
<body>
	<div id="main">
		<h1>CSS3 2D Transforms</h1>
		<div class="example" id="translate"><code>translate()</code><div></div></div>
		<div class="example" id="rotate"><code>rotate()</code><div></div></div>
		<div class="example" id="scale"><code>scale()</code><div></div></div>
		<div class="example" id="skew"><code>skew()</code><div></div></div>
		<div class="example" id="matrix"><code>matrix()</code><div></div></div>
	</div>
</body>
</html>

The page displays five <div>s, each labeled with a transform method and containing a small, darker <div>.
CSS Transform

When moused over, each of the small dark elements displays its respective transform method. This screenshot shows the result of each element upon application of its respective transform method:

In the first element, transform: translate(50px, 100px); pushes the small box 50 pixels right and 100 pixels down from its original position.
In the second element, transform: rotate(20deg); rotates the small box 20 degrees clockwise.
transform: scale(2.5, 3); stretches the third box 2.5 times wider and three times taller.
In the fourth example, we skew the small box 10 degrees about the X-axis and 30 degrees about the Y-axis with transform: skew(10deg, 30deg);.
We combine all of the transforms with transform: matrix(0.75,0.5,-0.5,1.5,20,0); in the final example.