CSS flip animation?

Question

I have a simple HTML form asking for general information with a button at the bottom labeled "next". Once I button is pressed, I have jQuery triggered to cause a "card flip" animation. What I would like to do is to reveal additional questions on the "back" side of the flip, containing a "Submit" button at the bottom of the back side. I need a way to create a blank page on the back side, so I can enter additional input fields.

What would be the easiest way to remove the input fields on the front side of the form, so I can create additional questions on the back side of the form?

 $(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 (ie 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

you could have two <div> s, one with the id of #front-side and the other with #back-side . When you click the card, it sets #front-side to display: none; and #back-side to display: block; and vice versa.

So for your code, if I am reading it right:

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