CSS3 2D Transforms

You are free to transform element in 2-dimensional (2D) using CSS3.

Here are some 2D transformation methods which are widely used in CSS3 2D transformation:

The translate()
The scale()
The rotate()
The skewX()
The skewY()
The matrix()

Let's take a look at all these methods to understand about the CSS3 2D transformation effects in different-different styles.

CSS3 2D Transform using translate() Method

The translate() method moves an element from its current position.

Here is an example uses CSS3 translate() method to create 2D transformation effects:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style> 
      div { width:300px; height:50px; background-color:red;
         color:white; border:1px solid black;
         -ms-transform:translate(50px,100px); /* for Internet Explorer 9 browser */
         -webkit-transform:translate(50px,100px); /* for Safari browser */
         transform:translate(50px,100px); /* this is the Standard syntax */ }
   </style>
</head>
<body>

<div>
   This div element is moved 50 pixels to the right,
   and 100 pixels down from its current position.
</div>

</body>
</html>

Here is the sample output of the above CSS3 2D transformation using the translate() method example code:

CSS3 2D Transform using scale() Method

Here is an example uses CSS3 scale() method to create 2D transformation effects:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style>
      div { margin:150px; width:170px; height:80px;
         background-color:red; color:white;
         border:2px solid green; border:2px solid green;
         -ms-transform:scale(2,3);
         -webkit-transform:scale(2,3);
         transform:scale(2,3); }
   </style>
</head>
<body>

<div>
   This div element is two times of its original width,
   and three times of its original height.
</div>

</body>
</html>

Following is the sample output produced by the above CSS3 2D transformation effect using the scale() method example code:

Here is one more example, also uses the CSS3 scale() method to create 2D transformation effects:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style>
      div { margin:150px; width:200px; height:100px;
         background-color:red; color:white;
         border:2px solid green; border:2px solid green;
         -ms-transform:scale(0.5,0.5);
         -webkit-transform:scale(0.5,0.5);
         transform:scale(0.5,0.5); }
   </style>
</head>
<body>

<div>
   This div element is decreased to be half of its 
   original width and height.
</div>

</body>
</html>

Below is the sample output of the above CSS3 2D transformation example code:

CSS3 2D Transform using rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise.

Here is an example uses CSS3 rotate() method to create 2D transformation effect:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style>
      div { width:300px; height:100px; background-color:red;
         color:white; border:2px solid green; }
      div#mDiv { -ms-transform:rotate(30deg);
         -webkit-transform:rotate(30deg);
         transform:rotate(30deg); }
   </style>
</head>
<body>

<div>
   This is a normal div element.
</div>
<div id="mDiv">
   This div element is rotated clockwise 30 degrees.
</div>

</body>
</html>

Here is the output of the above CSS3 2D transformation effect using the rotate() method example:

Here is another example also uses the CSS3 rotate() method to create 2D transformation effect:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style>
      div { width:300px; height:100px; background-color:red;
         color:white; border:2px solid green; }
      div#mDiv { -ms-transform:rotate(-30deg);
         -webkit-transform:rotate(-30deg);
         transform:rotate(-30deg); }
   </style>
</head>
<body>

<div>
   This is a normal div element.
</div>
<div id="mDiv">
   This div element is rotated anti-clockwise 30 degrees.
</div>

</body>
</html>

Below is the output of the above CSS3 2D transformation using rotate() method example code:

CSS3 2D Transform using skew() Method

You can use CSS3 skew() method to create 2D transformation effect as shown in this example:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style>
      div { width:300px; height:100px; background-color:red;
         color:white; border:2px solid green; }
      div#mDiv { -ms-transform:skew(30deg,20deg);
         -webkit-transform:skew(30deg,20deg);
         transform:skew(30deg,20deg); }
   </style>
</head>
<body>

<div>
   This a normal div element.
</div>
<div id="mDiv">
   This div element is skewed 30 degrees along the X-axis,
   and 20 degrees along the Y-axis.
</div>

</body>
</html>

The above CSS3 2D Transformation example will produce this output:

Following example also uses the CSS3 skew() method that helps in creating the 2D transformation effect:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style>
      div { width:300px; height:100px; background-color:red;
         color:white; border:2px solid green; }
      div#mDiv { -ms-transform:skew(30deg); 
         -webkit-transform:skew(30deg);
         transform:skew(30deg); }
   </style>
</head>
<body>

<div>
   This a normal div element.
</div>
<div id="mDiv">
   This div element is skewed 30 degrees along the X-axis.
</div>

</body>
</html>

Below is the sample output of the above 2D transformation example using CSS3:

CSS3 2D Transform using skewX() Method

The CSS3 skewX() method also helps in creating the 2D transformation effect as show here in the following example:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style>
      div { width:300px; height:100px; background-color:red;
         color:white; border:2px solid green; }
      div#mDiv { -ms-transform:skewX(30deg);
         -webkit-transform:skewX(30deg); 
         transform:skewX(30deg); }
   </style>
</head>
<body>

<div>
   This a normal div element.
</div>
<div id="mDiv">
   This div element is skewed 30 degrees along the X-axis.
</div>

</body>
</html>

This CSS3 2D transformation using skewX() method example will produce the following output:

CSS3 2D Transform using skewY() Method

Using the CSS3 skewY() method, you can create 2D transformation effect as shown in the example given below:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style>
      div { width:300px; height:100px; background-color:red;
         color:white; border:2px solid green; }
      div#mDiv { -ms-transform:skewY(30deg);
         -webkit-transform:skewY(30deg);
         transform:skewY(30deg); }
   </style>
</head>
<body>

<div>
   This a normal div element.
</div>
<div id="mDiv">
   This div element is skewed 20 degrees along the Y-axis.
</div>

</body>
</html>

Here is the output produced by this CSS3 2D transformation using the skewY() method example:

CSS3 2D Transform using matrix() Method

Here is an example uses the CSS3 matrix() method to create 2D transformation effect:

<!DOCTYPE html>
<html>
<head>
   <title>CSS3 2D Transformation Example</title>
   <style>
      div { width:200px; height:100px; background-color:red;
         color:white; border:2px solid green; }
      div#mDiv1 { -ms-transform:matrix(1, 0, 0.5, 1, 150, 0);
         -webkit-transform:matrix(1, 0, 0.5, 1, 150, 0);
         transform:matrix(1, 0, 0.5, 1, 150, 0); }
      div#mDiv2 { -ms-transform:matrix(1, -0.3, 0, 1, 0, 0);
         -webkit-transform:matrix(1, -0.3, 0, 1, 0, 0);
         transform:matrix(1, -0.3, 0, 1, 0, 0); }
   </style>
</head>
<body>

<div>
   This a normal div element.
</div>
<div id="mDiv1">
   Using the CSS3 matrix() method.
</div>
<div id="mDiv2">
   Another Using the CSS3 matrix() method.
</div>

</body>
</html>

The above CSS3 2D transformation using the matrix() method example will produce the output given below:

CSS Online Test

« Previous Tutorial Next Tutorial »