在jQuery中使用動畫旋轉

Question

嗨朋友我試圖創建一個彈出框，它將在點擊登錄按鈕後出現我想打開帶有旋轉效果的彈出框但未能實現目標，您可以check fiddle here或者您可以檢查我的代碼下面提及...

SCRIPT

 $('.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

這個插件可能是usefule您的需要。

http://louisremi.github.io/jquery.transform.js/

Answer 2

您可以使用該CSS-過渡和變化變換旋轉特性：

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

---

更新小提琴：http://jsfiddle.net/Km5GL/2/