jquery - 在 jQuery 中使用动画旋转

Question

嗨 friend 我正在尝试创建一个弹出框，它将在单击登录按钮后出现我想打开具有旋转效果的弹出框但未能实现您可以的目标check fiddle here 或者你可以查看我下面提到的代码......

脚本

        $('.login').click(function(){
            $('.loginWrapper').css('display','block');
        /*Trying to do something like this

        $('.loginBox').animate(function(){      
                transform: 'rotateX(-60deg)'
                })

        */
});

HTML

<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>

CSS

.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;
}
.loginBox h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #ED1C24;
}
.loginBox input[type="text"], input[type="password"], textarea {
    background-color: #F5F5F5;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset;
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #666;
}
.loginBox input[type="submit"] {
    text-align: center;
    color: #fff;
    width: 100%;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 8px;
    font-size: 1.4em;
    border: #95191d solid 1px;
    background: #e31c23; /* Old browsers */
    text-shadow: 2px 1px 0px rgba(109, 9, 12, 1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    font-family: 'Bariolbold';
    cursor: pointer;
    margin-bottom:10px;
}
.loginBox input[type="submit"]:hover {
    background: #b4030a; /* Old browsers */
}
.loginBox .forgotPassword {
    font-size: 13px;
    text-align: right;
    margin-bottom: 10px;
}
.loginBox a {
    color: #0088CC;
}
.loginBox input[type="text"], input[type="password"], textarea {
    border: 1px solid #CCCCCC;
    padding: 5px;
    width: 100%;
}
.loginBox input, select, textarea, input[type="password"] {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: medium none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

Answer 1

您可以为此使用 css-transitions 并更改 transform-rotate 属性:

JS

$('.loginRotate').css({
    '-webkit-transform': 'rotate(0deg)',
    'transform': 'rotate(0deg)'
}); 

CSS

.loginRotate{
    -webkit-transform: rotateX(-60deg);
    transform: rotateX(-60deg);
    -webkit-transition: 0.5s ease -webkit-transform;
    transition: 0.5s ease transform;
}

---

最好的方法 - 为此参数添加单独的类

JS

$('.loginRotate').addClass('spot');

CSS

.loginRotate.spot {
    -webkit-transform: rotate(0deg),
    transform: rotate(0deg)
}

---

更新 fiddle :http://jsfiddle.net/Km5GL/2/