1. Home
  2. How-to Articles
  3. How to Use CSS 2-D Transforms

How to Use CSS 2-D Transforms

  • google plus

In Brief...

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

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

  1. 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).
  2. 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

  3. 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:
    CSS Transforms Applied
    • 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.

Need CSS Training?

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, XML, Windows, Java, Adobe, HTML5, JavaScript, Angular, and much more. Check out our complete course catalog.

Categories

Courses

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss