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.

  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 ( 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>
    	<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>

    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.
Author: Chris Minnick

Chris Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and XHTML.

About Webucator

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, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.