Two Dimensional Transforms

Contact Us or call 1-877-932-8228
Two Dimensional Transforms

Two Dimensional Transforms

CSS3 gives us 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:

2D Transform Methods
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 for more description of using the matrix function (but be sure to dig up a linear algebra textbook for reference!)

Browser support for transforms is catching up; newer versions of desktop and mobile browser support the property well. Vendor prefixes are recommended - we won't show the prefixes when discussing syntax but will use as appropriate in demos and exercises. Internet Explorer supports transform from version 9 (with -ms- prefix) and without the prefix in version 10.

We'll examine each of the various transform methods in the next example.

Code Sample:

<!DOCTYPE html>
	<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);
	<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>

Open ClassFiles/TransformsTransitions/Demos/transforms.html in a code editor to view the code, and in a browser to view the result.

The page displays five <div>s, each labeled with a transform method and containing a small, darker <div>. When moused over, each of the small dark elements displays its respective transform method. The screenshot below shows at top the original state of each element; at bottom is the result of each upon application of its respective transform method:

2-D transform demo

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.

We use transform: scale(2.5, 3); to stretch 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.

By default, the origin - the reference point for translations, rotations, scalings, and skewings - is the center of the element. We can change that via the transform-origin property. The property accepts values for the x-axis and y-axis of the origin, respectively, in percentage, absolute length, or keyword forms. Here are some examples:

  • transform-origin: 20% 50%
  • transform-origin: left top (possible x values are left, center, right; possible y values are top, center, bottom)
  • transform-origin: 10px 50px

In our work so far, we have only looked at two-dimensional transforms. CSS3 also gives us the power to transform elements in three dimensions, too, but those transforms are beyond the scope of this course.