CSS флип-анимация?

Question

У меня есть простая форма HTML, запрашивающая общую информацию с кнопкой внизу, обозначенной «следующая». Как только я нажимаю кнопку, у меня запускается jQuery, чтобы вызвать анимацию «flip». То, что я хотел бы сделать, это выявить дополнительные вопросы на «обратной стороне» флип, содержащие кнопку «Отправить» внизу обратной стороны. Мне нужен способ создать пустую страницу на обратной стороне, поэтому я могу ввести дополнительные поля ввода.

Что было бы самым простым способом удалить поля ввода на лицевой стороне формы, поэтому я могу создать дополнительные вопросы на обратной стороне формы?

$(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, а другой с #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>