You can use transform property also to decorate your divs and other ekements on the webpage...
1.If you want to rotate a div on hover you can do it like this
<body>
<form>
<div id="login">
<input type="text" name="uname" placeholder="Enter your Username here" size="30"><br>
<input type="password" name="password" placeholder="********">
<input type="submit" name="submit" value="Sign In!">
</div>
</form>
</body>
now if we want to rotate the login div if any user hover on it we can do it like this..
<style>
input
{
border:none;
background-color:rgba(0,0,0,0.5);
color: white;
border-radius: 4px;
padding: 5px;
}
#login
{
background-color: rgba(189, 183, 45,0.7);
padding: 5px;
border-radius: 5px;
box-shadow:0px 0px 12px white;
}
#login:hover
{
-webkit-transform:rotate(5deg);
//-webkit-transform:scale(1.09);
//-webkit-transform:translate(10px,20px);
}
</style>
2.You can zoom out or zoom in the element using the scale property like
-webkit-transform:scale(1.09);
3.Similarly we can move an element using transform property..
-webkit-transform:translate(10px,20px);
Hope it'll help you...
1.If you want to rotate a div on hover you can do it like this
<body>
<form>
<div id="login">
<input type="text" name="uname" placeholder="Enter your Username here" size="30"><br>
<input type="password" name="password" placeholder="********">
<input type="submit" name="submit" value="Sign In!">
</div>
</form>
</body>
now if we want to rotate the login div if any user hover on it we can do it like this..
<style>
input
{
border:none;
background-color:rgba(0,0,0,0.5);
color: white;
border-radius: 4px;
padding: 5px;
}
#login
{
background-color: rgba(189, 183, 45,0.7);
padding: 5px;
border-radius: 5px;
box-shadow:0px 0px 12px white;
}
#login:hover
{
-webkit-transform:rotate(5deg);
//-webkit-transform:scale(1.09);
//-webkit-transform:translate(10px,20px);
}
</style>
2.You can zoom out or zoom in the element using the scale property like
-webkit-transform:scale(1.09);
3.Similarly we can move an element using transform property..
-webkit-transform:translate(10px,20px);
Hope it'll help you...
No comments:
Post a Comment