1
Ich habe ein einfaches HTML-Formular, das nach allgemeinen Informationen fragt, mit einem Knopf am unteren Rand, der mit "next" gekennzeichnet ist. Sobald ich die Taste gedrückt habe, habe ich jQuery ausgelöst, um eine "card flip" -Animation zu verursachen. Was ich tun möchte, ist, zusätzliche Fragen auf der "Rückseite" Seite der Klappe zu enthüllen, mit einem "Submit" Knopf auf der Unterseite der Rückseite. Ich brauche eine Möglichkeit, eine leere Seite auf der Rückseite zu erstellen, damit ich zusätzliche Eingabefelder eingeben kann.CSS-Flip-Animation?
Was wäre der einfachste Weg, um die Eingabefelder auf der Vorderseite des Formulars zu entfernen, damit ich zusätzliche Fragen auf der Rückseite des Formulars erstellen kann?
$(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>
'Backface-visibility'? – gcampbell
bereits gefunden [davidwalsh.name/css-flip](http://davidwalsh.name/css-flip)? –
Sie sollten keine Daten entfernen müssen ... – Adjit