Translate method in CSS3

With the help of this method, the element can move its current position.  It depends on the parameters of the left (X-axis) and the top (Y-axis) position


<html>

<head>

<style type="text/css"> 

div

{

width:100px;

height:60px;

background-color:pink;

border:1px solid blue;

}

div#div1

{

transform:translate(50px,100px);

-moz-transform:translate(50px,100px); /* Used In Firefox */

-webkit-transform:translate(50px,100px); /* Used In Chrome */

-ms-transform:translate(50px,100px); /* Used In IE 9 */

-o-transform:translate(50px,100px); /* Used In Opera */

}

</style>

</head>

<body>


<div>My Name is Mahak.</div>


<div id="div1">Hello. This is a simple example of translate method in CSS</div>


</body>

</html>


Next Recommended Reading Transaction Effect In CSS3