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 tranformation:

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

CSS3 translate() Method

Here is an example uses CSS3 translate() method to create tranformation effects:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 300px;
    height: 100px;
    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>
Here, CSS3 The translate() method moves an element from its 
current position. 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 example:

css3 2d transformations

CSS3 scale() Method

Here is an example uses CSS3 scale() method to create tranformation effects:

<!DOCTYPE html>
<html>
<head>
<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 example:

css3 2d transform

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

<!DOCTYPE html>
<html>
<head>
<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 example:

css 2d transformation

CSS3 rotate() Method

Here is an example uses CSS3 rotate() method to create tranformation effect:

<!DOCTYPE html>
<html>
<head>
<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">
CSS3 The rotate() method rotates an element clockwise or 
counter-clockwise. This div element is rotated clockwise 30 degrees
</div>

</body>
</html>

Here is the output of the above CSS3 example:

css3 2d transforms

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

<!DOCTYPE html>
<html>
<head>
<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">
The CSS3 rotate() method rotates the element clockwise or 
counter-clockwise. This div element is rotated anti-clockwise 30 degrees
</div>

</body>
</html>

Below is the output of the above CSS3 example:

css3 2d transformation example

CSS3 skew() Method

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

<!DOCTYPE html>
<html>
<head>
<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 example will produce this output:

css3 two dimension transform

Following example also uses CSS3 skew() method in creating tranformation effect:

<!DOCTYPE html>
<html>
<head>
<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>

It will display the following output:

css3 2d transformations methods

CSS3 skewX() Method

The CSS3 skewX() method helps in creating tranformation effect as show here in the following example:

<!DOCTYPE html>
<html>
<head>
<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 example will produce the following output:

css3 two dimensional transformations

CSS3 skewY() Method

Using CSS3 skewY() method, you can create tranformation effect as shown in below example:

<!DOCTYPE html>
<html>
<head>
<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 example:

css transformations in 2d

CSS3 matrix() Method

Here is an example uses the CSS3 matrix() method to create tranformation effect:

<!DOCTYPE html>
<html>
<head>
<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 example will produce the output given below:

css3 2d transform properties

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test