Question

好的，所以我创建了一个form，以便当用户点击register链接时，表单会执行transform: rotateY(180)，现在翻转已正确完成，但我没有与表单另一面的交互性，并且无法为此找到解决方案，假设它是因为ther是一个包装两个表单的容器，而这个容器是执行动画的容器，那么有解决方案吗？任何提示apreciated感谢，这是代码： HTML-＆GT

<div id="reg-login-wrapper" >
<div id="flip">
    <div id="login">
        <input type="text"  class="inputs" name="user-login"  id="user-login"placeholder="Name"/>
        <br /><input type="password" class="inputs" name="pas-login"  id="pas-login" placeholder="Password"/>
        <label  for="keep-loged">Keep me loged in</label>&nbsp; 
         <input type="checkbox" id="loged" name="keep-loged"/>           
        <br /><input type="button" value="Submit"  onClick="javascript: validateUser();"/>
        <span id="forgot-password">Forgot your username/password ?</span>
        <br /><span id="go-register">Register</span>
    </div><!-- end #login -->
 <div id="register">
        <input type="text" name="user-reg" placeholder="Name"/>
        <input type="email"  name="email-reg" placeholder="E-mail"/>
        <input type="password" name="pwd-reg"  placeholder="Password"/>
        <input type="password" name="pwd-confirm-reg"  placeholder="Confirm password"/>
        <input type="text"  name="date-reg" value="<?php echo date("M-d-Y");?>" id="reg-date"  disabled />
        <input type="button" value="Submit" />
  </div> <!-- end #register-->
</div><!-- end # reg-login-wrapper -->               
      </div> <!-- end # reg-login-wrapper -->

css：

.flip2reg{
-webkit-transform: rotateY(180deg);
}
#register{
position: absolute;
border: none;
top: 0;
left: 0;
width: 500px;
height: 400px;
margin: 0px auto;
background: rgb(63,13,25);
padding-top: 30px;
-webkit-box-shadow: inset 0 0 15px black;
-webkit-border-radius: 50px 0 100px 0;
-webkit-transform: rotateY(180deg);
backface-visibility: hidden;
z-index: 1;
}
#login{
position: absolute;
border: none;
top: 0;
left: 0;
width: 500px;
height: 275px;
margin: 0 auto;
background: rgb(63,13,25);
padding-top: 70px;
-webkit-box-shadow: inset 0 0 15px black;
-webkit-border-radius: 50px 0 100px 0;
-webkit-transition: all 1s ease-out;
backface-visibility: hidden;
z-index: 3;
}

#reg-login-wrapper{
border: none;
width: 500px;
height: 400px;
margin: 2% auto;
perspective: 1000;
}

和激活动画的.js：

$("#go-register").click(function(){                     
                            $("#flip").addClass('flip2reg');

                    });

Answer 1

好的，所以想出了这个问题并解决了在动画完成后添加一些css的问题：

$("#go-register").click(function(){                     
                            $("#flip").addClass('flip2reg').css({"backface-visibility": "visible", "z-index": "-1"});
                            $("#login").css({"backface-visibility": "hidden", "z-index": "-1"});
                            $("#register").css("z-index", "900");                       
                    });

css卡翻转动画后没有互动

1 个答案: