html - No interaction posible after css card flip animation -
OK, I am creating a CSS: and .js which activates the animation: OK, detect this problem and add some CSS after the animation ("Flip2reg") .CSS ({"backfast-visibility") ($ "(" # go-register ") (function () {$ (" # flip "):" visible "," Css ({"backfirst-visibility": "hidden", "z-index": "-1"}); $ ("#"); $ ("#"); $ (" Register "). CSS (" z-index "," 900 ");}); form so that when user
register Link transforms form a
: rotateY (180) , now flip is done correctly, but I have no interactivity on the other side of the form, and this data can not be solved for , It can be understood because it is a container that wraps both forms and this container is one that makes an animation, then Education is the solution? Thanks for any suggestions, here's the code: html->
& lt; Div id = "reg-login-wrapper" & gt; & Lt; Div id = "flip" & gt; & Lt; Div id = "login" & gt; & Lt; Input type = "text" class = "input" name = "user-login" id = "user login" placeholder = "name" /> & Lt; Br / & gt; Input type = "password" class = "input" name = "pass-login" id = "pas-login" placeholder = "password" /> & Lt; For label = "kept" & gt; Keep me logged in & lt; / Labels & gt; & Amp; Nbsp; & Lt; Input type = "checkbox" id = "logged" name = "keep-logged" /> & Lt; Br / & gt; Input type = "button" value = "submit" onClick = "javascript: validateUser ();" /> & Lt; Span id = "forgot-password" & gt; Forgot your username / password? & Lt; / Span & gt; & Lt; Br / & gt; & Lt; Span id = "go-register" & gt; Register & lt; / Span & gt; & Lt; / Div & gt; & Lt ;! - End # Login - & gt; & Lt; Div id = "register" & gt; & Lt; Input type = "text" name = "user-reg" placeholder = "name" /> & Lt; Input type = "email" name = "email-reg" placeholder = "e-mail" /> & Lt; Input type = "password" name = "pwd-reg" placeholder = "password" /> & Lt; Input type = "password" name = "pwd-confirm-reg" placeholder = "confirm password" / & gt; & Lt; Input type = "text" name = "date-reg" value = "& lt ;? php echo date (" m-d-y ") ;? Id = "reg-date" disabled / & gt; & Lt; Input type = "button" value = "submit" /> & Lt; / Div & gt; & Lt ;! - End # register - & gt; & Lt; / Div & gt; & Lt ;! - End # reg-login-wrapper - & gt; & Lt; / Div & gt; & Lt ;! - End # reg-login-wrapper - & gt;
.flip2reg {-webkit-transform: rotateY (180deg); } # Registry {status}: Completed; Border: None; Top: 0; Left: 0; Width: 500px; Height: 400 pixels; Margin: 0 px auto; Background: RGB (63,13,25); Padding-top: 30px; -WebKit-box-shadow: Inset 0 15px black; -WebKit-boundary-radius: 50px 0 100px 0; Webkit-transform: rotate (180 degrees); Backfirst-visibility: hidden; Z-index: 1; } # Login {Status: Completed; 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 15px black; -WebKit-boundary-radius: 50px 0 100px 0; -Widk-Infection: All 1s Easy-Out; Backfirst-visibility: hidden; Z-index: 3; } # Reg-login-wrapper {Range: None; Width: 500px; Height: 400 pixels; Margins: 2% auto; Perspective: 1000; }
$ ("# go-register"). Click (function () {$ ("# flip"). AddClass ('flip2reg');});
Comments
Post a Comment