Online: 6099
Online: 6099
Online: 6099
Translate method is used to translate the text
<style type="text/css">
.showbox {
float: left;
margin: 4em 1em;
width: 100px;
height: 60px;
border: 2px solid green;
background-color: pink;
line-height: 60px;
text-align: center;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
.showbox.slideright:hover {
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
transform: translate(3em,0);
}
</style>
</head>
<body>
<div class="showbox slideright">TechFunda</div>
</body>
In the above code snippet we have defined the translate method, we have defined two styles in show box and show box slide right, in the show box we have defined the box size with color, background color, border etc and in the show box slide right with hover we have translate method which translate the method with the given values
output
