In the previous chapter you learnt about CSS3 User Interface. Now in this chapter we will learn about CSS3 2D Transform, Which allows the user some extra ability to work on the design.
CSS3 2D Transform
A transform is such a property of CSS3, which is used for changing the actual form of the element. With this feature of CSS3 You can change the shape, size and position of an element.
CSS3 2D Transform has introduced mainly five types of methods that has been described as follows:
✔ translate()
✔ rotate()
✔ scale()
✔ skew()
✔ matrix()
hover me
translate() method
The translate() Method is used to move an object depending on its parameter. Two types of parameter you can pass in this method one is from left (x-axis) and the other is from the top (y-axis).
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#div_notranslate
{
float:left;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_translate
{
position:absolute;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:translate(40px,40px);
-ms-transform:translate(40px,40px);
-moz-transform:translate(40px,40px);
-webkit-transform:translate(40px,40px);
-o-transform:translate(40px,40px);
}
</style>
</head>
<body>
<div id="div_notranslate"> original</div>
<div id="div_translate">After Translate method</div>
</body>
</html>
rotate() method
The rotate() method is used to rotate an object depending on its value. Two types of value you can pass in this method one is positive (for clockwise rotation) and the other one is negative (for counter-clockwise rotation).
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#div_norotate
{
float:left;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_rotate
{
position:absolute;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="div_norotate"> original</div>
<div id="div_rotate">After rotate method</div>
</body>
</html>
scale() method
The scale() method is used to increase or decrease an object size depending on its value passed in the parameter. Two types of value you can pass in the parameter, one is for width (x-axis) and the other one for height (y-axis).
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#div_noscale
{
float:left;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_scale
{
position:absolute;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:scale(2,2);
-ms-transform:scale(2,2);
-moz-transform:scale(2,2);
-webkit-transform:scale(2,2);
-o-transform:scale(2,2);
}
</style>
</head>
<body>
<div id="div_noscale"> original</div>
<div id="div_scale">After scale method</div>
</body>
</html>
skew() method
The skew() method is used to change the angle of an object depending on its value passed in the parameter. Two types of value you can pass in the parameter, one is for horizontal (x-axis) and the other one for vertical (y-axis).
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#div_noskew
{
float:left;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_skew
{
position:absolute;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:skew(15deg,20deg);
-ms-transform:skew(15deg,20deg);
-moz-transform:skew(15deg,20deg);
-webkit-transform:skew(15deg,20deg);
-o-transform:skew(15deg,20deg);
}
</style>
</head>
<body>
<div id="div_noskew"> original</div>
<div id="div_skew">After skew method</div>
</body>
</html>
matrix() method
The matrix() method is used to change all transformation at one time, has been defined above. Six types of value you can pass in the parameter.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title Name will go here</title>
<style>
#div_nomatrix
{
float:left;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
opacity:0.4;
filter:alpha(opacity=40);
}
#div_matrix
{
position:absolute;
margin:50px 0 0 50px;
width:100px;
height:100px;
background-color:rgba(255,0,0,0.5);
border:1px solid #000000;
transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-ms-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-moz-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-webkit-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
-o-transform:matrix(0.766,0.4,-0.4,0.766,0,0);
}
</style>
</head>
<body>
<div id="div_nomatrix"> original</div>
<div id="div_matrix">After matrix method</div>
</body>
</html>