codescracker


css

CSS3 2D Transforms



« Previous Tutorial Next Tutorial »


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:

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 transformations

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:

css3 2d transform

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:

css 2d transformation

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:

css3 2d transforms

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 transformation example

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:

css3 two dimension transform

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 transformations methods

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 two dimensional transformations

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 transformations in 2d

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:

css3 2d transform properties

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test