CSS 플립 애니메이션?

Question

나는 "다음"이라는 레이블이 붙은 하단에 일반 정보를 묻는 간단한 HTML 양식을 가지고 있습니다. 일단 버튼을 누르면 jQuery가 "카드 뒤집기"애니메이션을 유발하도록 트리거합니다. 제가하고 싶은 것은 뒷면의 하단에 "제출"버튼이 들어있는 뒤의 "뒷면"에 대한 추가 질문을 밝히는 것입니다. 뒷면에 빈 페이지를 만드는 방법이 필요하므로 추가 입력 필드를 입력 할 수 있습니다.

양식의 앞면에있는 입력 필드를 제거하는 가장 쉬운 방법은 무엇입니까? 그러면 양식 뒷면에 추가 질문을 만들 수 있습니까?

$(document).ready(function() { 
 
    $("input[name='next']").on("click", function() { 
 
    // console.log("The Button Worked!"); 
 
    $(".form").css("transform", "rotateY(180deg)"); 
 
    }) 
 
});

/*CSS FOR MY FORM*/ 
 

 
.form { 
 
    transform-style: preserve-3d; 
 
    -webkit-transition-duration: 2s; 
 
    -moz-transition-duration: 2s; 
 
    -o-transition-duration: 2s; 
 
    transition-duration: 2s; 
 
} 
 
.flex { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: nowrap; 
 
    align-items: space-between; 
 
} 
 
.formTitle { 
 
    border-bottom: solid red; 
 
} 
 
.form-style-5 { 
 
    position: relative; 
 
    top: 5px; 
 
    max-width: 60%; 
 
    max-height: 82vh; 
 
    padding: 10px 20px; 
 
    background: #f4f7f8; 
 
    margin: 10px auto; 
 
    border-radius: 8px; 
 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 
 
} 
 
#form-style-5-Animation { 
 
    animation: slide 3s 1; 
 
} 
 
@keyframes slide { 
 
    0% { 
 
    transform: translate3d(0px, 1000%, 0px); 
 
    } 
 
    100% { 
 
    transform: translate3d(0px, 0%, 0px); 
 
    } 
 
} 
 
.form-style-5:after { 
 
    opacity: 1; 
 
} 
 
.form-style-5 fieldset { 
 
    border: none; 
 
} 
 
.form-style-5 legend { 
 
    font-size: 1.4em; 
 
    margin-bottom: 10px; 
 
} 
 
.form-style-5 label { 
 
    font-size: 1.3em; 
 
    display: block; 
 
    margin-bottom: 8px; 
 
} 
 
.form-style-5 input[type="text"], 
 
.form-style-5 input[type="date"], 
 
.form-style-5 input[type="datetime"], 
 
.form-style-5 input[type="email"], 
 
.form-style-5 input[type="location"], 
 
.form-style-5 input[type="number"], 
 
.form-style-5 input[type="search"], 
 
.form-style-5 input[type="time"], 
 
.form-style-5 input[type="url"], 
 
.form-style-5 textarea, 
 
.form-style-5 select { 
 
    font-family: Georgia, "Times New Roman", Times, serif; 
 
    background: rgba(255, 255, 255, .1); 
 
    border: none; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    margin: 0; 
 
    outline: 0; 
 
    padding-left: 2%; 
 
    height: 6%; 
 
    width: 100%; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    background-color: #e8eeef; 
 
    color: #8a97a0; 
 
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; 
 
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03) inset; 
 
    margin-bottom: 3%; 
 
} 
 
.form-style-5 input[type="text"]:focus, 
 
.form-style-5 input[type="date"]:focus, 
 
.form-style-5 input[type="datetime"]:focus, 
 
.form-style-5 input[type="email"]:focus, 
 
.form-style-5 input[type="number"]:focus, 
 
.form-style-5 input[type="search"]:focus, 
 
.form-style-5 input[type="time"]:focus, 
 
.form-style-5 input[type="location"]:focus, 
 
.form-style-5 textarea:focus, 
 
.form-style-5 select:focus { 
 
    background: #d2d9dd; 
 
} 
 
.form-style-5 select { 
 
    -webkit-appearance: menulist-button; 
 
    height: 35px; 
 
} 
 
.form-style-5 .number { 
 
    background: red; 
 
    color: #FCFBE3; 
 
    height: 25px; 
 
    width: 25px; 
 
    display: inline-block; 
 
    font-size: 0.8em; 
 
    margin-right: 4px; 
 
    line-height: 25px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); 
 
    border-radius: 0px 15px 15px 15px; 
 
    margin-bottom: 3%; 
 
} 
 
.form-style-5 input[type="submit"], 
 
.form-style-5 input[type="button"] { 
 
    position: relative; 
 
    display: block; 
 
    padding: 10px 39px 10px 39px; 
 
    color: #FCFBE3; 
 
    margin: 0 auto; 
 
    background: red; 
 
    font-size: 18px; 
 
    text-align: center; 
 
    font-style: normal; 
 
    width: 100%; 
 
    border: 1px solid red; 
 
    border-width: 1px 1px 3px; 
 
    margin-bottom: 10px; 
 
    box-shadow: 0 5px 0 #b30000; 
 
    border-radius: 4px; 
 
} 
 
.form-style-5 input[type="submit"]:active, 
 
.form-style-5 input[type="button"]:active { 
 
    transform: translateY(3px); 
 
    box-shadow: 0 2px 0 #b30000; 
 
} 
 
.form-style-5 input[type="submit"]:focus, 
 
.form-style-5 input[type="button"]:focus { 
 
    outline: 0; 
 
} 
 
.next { 
 
    -webkit-transition-duration: .01s; 
 
    -moz-transition-duration: .01s; 
 
    -o-transition-duration: .01s; 
 
    transition-duration: .01s; 
 
    -webkit-transition-property: -webkit-transform; 
 
    -moz-transition-property: -moz-transform; 
 
    -o-transition-property: -o-transform; 
 
    transition-property: transform; 
 
} 
 
/*THE REST OF MY CSS*/ 
 

 
body, 
 
div, 
 
h1, 
 
h1, 
 
h3, 
 
h4, 
 
h5, 
 
h6, 
 
p, 
 
ul, 
 
ol, 
 
li, 
 
dl, 
 
dt, 
 
dd, 
 
img, 
 
form { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 
body { 
 
    text-align: center; 
 
} 
 
.logo { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    height: 55px; 
 
    width: 162px; 
 
    float: left; 
 
    z-index: 222; 
 
    opacity: 1; 
 
} 
 
header { 
 
    height: 60px; 
 
    width: 100%; 
 
    z-index: 10; 
 
    position: fixed; 
 
    opacity: .8; 
 
} 
 
.banner { 
 
    background: black; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0px; 
 
    opacity: .8; 
 
} 
 
#banner { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0px; 
 
    background: url("banner.jpg"); 
 
    background-size: 100% 100%; 
 
    background-repeat: no-repeat; 
 
    padding-top: 10px; 
 
    font-size: 100%; 
 
    text-shadow: 20px black; 
 
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 
 
} 
 
.button1, 
 
.button2, 
 
.button3, 
 
.button4 { 
 
    border-radius: 8px; 
 
    width: 120px; 
 
    margin-top: 10px; 
 
    margin-right: 5px; 
 
    margin-left: 5px; 
 
    padding-top: 10px; 
 
    padding-right: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 10px; 
 
    float: right; 
 
    border-style: solid; 
 
    border-color: red; 
 
    border-width: 1.5px; 
 
    color: red; 
 
    background-color: black; 
 
    font-size: 14px; 
 
} 
 
.button1:hover, 
 
.button2:hover, 
 
.button3:hover, 
 
.button4:hover { 
 
    background-color: red; 
 
    color: white; 
 
    opacity: 1; 
 
    z-index: 9999; 
 
} 
 
.button1:focus, 
 
.button2:focus, 
 
.button3:focus, 
 
.button4:focus { 
 
    outline: 0; 
 
} 
 
#formOpacity { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<div id="container"> 
 
    <div id="banner"> 
 
    <div class="banner"></div> 
 
    <div class="form-style-5" id="form-style-5-Animation"> 
 
     <div class="form"> 
 
     <form action="send-sms.php" method="POST"> 
 
      <fieldset class='flex'> 
 
      <legend> 
 
       <div class="formTitle">Fill out the form below to request help!</div> 
 
      </legend> 
 
      <input type="text" name="field1" id="name" placeholder="Your Name *"> 
 
      <input type="text" name="field3" id="location" placeholder="Your Location (i.e. McNutt, exact address, etc.)*"> 
 
      <input type="text" name="field4" id="misc" placeholder="Miscellaneous Information That May Be Important"> 
 
      <input type="email" name="field2" id="email" placeholder="Email Address"><span class="number">or</span> 
 
      </h4> 
 
      <input type="text" name="field5" id="phone" placeholder="Phone Number"> 
 
      <input type="text" id="task" name="field6" placeholder="Task that needs completion, let us know how we can help!*"></input> 
 
      </fieldset> 
 
      <input name="next" type="button" value="Next" class="next" /> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

는

Answer 1

두 <div>의, #front-side의 ID로 하나 #back-side와 다른있을 수 있습니다. 카드를 클릭하면 #front-side을 display: none; 및 #back-side을 display: block;으로 설정하고 반대의 경우도 마찬가지입니다.

코드에 대한 그래서

, 내가 잘 읽고 있습니다 경우 :

<div class="form"> 
    <div id="front-side">  
    <form action="send-sms.php" method="POST"> 
     <fieldset class='flex'> 
     <legend> 
      <div class="formTitle"> 
      Fill out the form below to request help! 
      </div> 
     </legend> 
     <input type="text" name="field1" id="name" placeholder="Your Name *"> 
     <input type="text" name="field3" id="location" placeholder="Your Location"> 
     <input type="text" name="field4" id="misc" placeholder="Miscellaneous Information That May Be Important"> 
     <input type="email" name="field2" id="email" placeholder="Email Address"><span class="number">or</span> 
     </h4> 
     <input type="text" name="field5" id="phone" placeholder="Phone Number"> 
     <input type="text" id="task" name="field6" placeholder="Task that needs completion, let us know how we can help!*"></input> 
     </fieldset> 
     <input name="next" type="button" value="Next" class="next" /> 
    </form> 
    </div> 
    <div id="back-side"> 
    <span>back-side stuff here</span> 
    </div> 
</div>