Greetings! I am in the process of creating a popup box that will appear upon clicking the Login button. My aim is to produce a popup box with a rotating effect, however, my attempts have not been successful so far. You can view the code snippet on JsFiddle or take a look at the code provided below.
SCRIPT
$('.login').click(function(){
$('.loginWrapper').css('display','block');
/*Trying to do something like this
$('.loginBox').animate(function(){
transform: 'rotateX(-60deg)'
})
*/
});
<button class="login">Login</button>
<div class="loginWrapper">
<div class="loginBox loginRotate"> <img src="images/Cancel.png" width="32" height="32" alt=" " class="cancel">
<h2>Login</h2>
<form name="form1" method="post" action="">
<input type="text" name="" id="" value="Email ID" onblur="if (this.value=='') this.value = this.defaultValue" onfocus="if (this.value==this.defaultValue) this.value = ''">
<input type="password" name="" id="" value="Password" onblur="if (this.value=='') this.value = this.defaultValue" onfocus="if (this.value==this.defaultValue) this.value = ''">
<div class="forgotPassword"><a href="#">Forgot password?</a></div>
<input name="" type="submit" value="Login">
<div class="forgotPassword">Don't have an account? <a href="#">Get in touch</a> with our Sales team.</div>
</form>
</div>
</div>
.blksheet {
background: url(../images/blkSheet.png);
height: 100%;
width: 100%;
position: fixed;
z-index: 9999999;
display:none;
}
.loginWrapper{
position: fixed;
width: 400px;
-webkit-perspective: 500px; /* Chrome, Safari, Opera */
perspective: 500px;
top: 40%;
left: 40%;
z-index: 99999999;
display:none;
}
.loginRotate{
-webkit-transform: rotateX(-60deg); /* Chrome, Safari, Opera */
transform: rotateX(-60deg);}
.loginBox {
background: #fff;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
transform-origin:50% 0 0;
padding: 13px 20px;
font-size: 1em;
-webkit-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 13px 0px rgba(0,0,0,0.75);
}
.loginBox .cancel {
position: absolute;
right: -18px;
top: -18px;
cursor: pointer;
}
..... (CSS continues)