A Pen by Michael Watts.

Flipping-signup-form.markdown

Flipping signup form

Taken from http://blocksapp.io/ I liked the effect and tidiness so decided to copy and try to improve

A Pen by Michael Watts on CodePen.

License.

index.html

<div class="row">
  <div class="col-md-4 col-md-offset-4">
    <div class="sign-up">
        <div class="sign-up-label">
            <p>Sign up now for emails about our company<br>
        <strong>Psst! The first 10 will get great prizes!</strong></p>
        </div>
        <div class="flipsies">
          <form method="post" name="sign-up-form" class="sign-up-form" id="signup_home_header">
            <div class="field"><input type="text" placeholder="First name" name="fname" required=""></div>
            <div class="field"><input type="text" placeholder="Last name" name="sname" required=""></div>
            <div class="field"><input type="email" placeholder="Email" name="email" required=""></div>
            <button type="submit" class="sign-up-btn btn">Join</button>
          </form>
          <div class="sign-up-success share" aria-hidden="true"><strong>Check your inbox.</strong> Spread the love —
            <a href="#">Tweet it!</a>
          </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-4 col-md-offset-4 text-center">
    <p class="h5">Click Join button for animated flip with call to action.</p>
  </div>
</div>

script.coffee

$('.sign-up-btn').on 'click',  ->
  
  $(':input[required]').each ->
    if !$(this).val()
      $(this).parent('.field').addClass('error')
    else
      $('.sign-up-btn').addClass('is-loading')
      setTimeout ( -> 
        $('.sign-up').addClass('is-complete')
      ), 3000
  
  return false

style.scss

@import "compass";
html {
  font-family:sans-serif;
  text-size-adjust:100%;
  width:100%;
  height:100%;
  font-smoothing:antialiased;
  position:relative;
}

body {
  font-family: "Helvetica Neue",Arial,sans-serif;
  font-size:20px;
  line-height:1.4em;
  color:#193e59;
  margin:0;
  background-color: #EEE;
}

@keyframes flip
{
  0% {
    transform:rotateX(0deg);
    animation-timing-function:ease-out;
  }

  40% {
    transform:rotateX(-10deg);
    animation-timing-function:ease-out;
  }

  70% {
    transform:rotateX(220deg);
    animation-timing-function:ease-in;
  }

  100% {
    transform:rotateX(180deg);
    animation-timing-function:ease-in-out;
  }
}

@keyframes pop
{
  0% {
    transform: scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

input[type=color]:focus, input[type=date]:focus, input[type=datetime-local]:focus, input[type=datetime]:focus, input[type=email]:focus, input[type=month]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, input[type=time]:focus, input[type=url]:focus, input[type=week]:focus, select:focus, textarea:focus, button:focus, btn:focus  {
  outline: 0;
}

button,input,select,textarea {
  font-family:inherit;
  font-size:100%;
  margin:0;
}

button,input {
  line-height:normal;
}

button,select {
  text-transform:none;
}

button,html input[type=button],input[type=reset],input[type=submit] {
  appearance: button;
  cursor:pointer;
}

* {
  box-sizing:border-box;
}

.btn,button,input[type=submit] {
  background:#45d1e5;
  color:#fff;
  font-weight:700;
  position:relative;
  border-radius:6px;
  min-width:4em;
  text-indent:0;
  overflow:hidden;
  transform-style:preserve-3d;
  transition:all 200ms cubic-bezier(0.86,0,.07,1);
}

.btn:after,button:after,input[type=submit]:after {
  opacity:0;
  transition:opacity 100ms cubic-bezier(0.755,.05,.855,.06);
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  z-index:13;
  background:url(https://s3-eu-west-1.amazonaws.com/mwimages/codepen/loader.svg) no-repeat center center;
  width:30px;
  height:30px;
  display:block;
  transform-style:preserve-3d;
  transform:translate3d(0,0,0);
  transform-origin:50% 50%;
  animation:spin .5s steps(8) infinite 200ms;
  background-size:100% 100%;
  margin:auto;
}

.btn.is-loading:after,button.is-loading:after,input.is-loading[type=submit]:after {
    opacity: 1;
  }

.btn:focus,.btn:hover,button:focus,button:hover,input[type=submit]:focus,input[type=submit]:hover {
  background-color:#B7B7B8;
  outline: 0;
}

.btn.is-loaded:after,button.is-loaded:after,input.is-loaded[type=submit]:after {
  opacity:0;
}

input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea {
  border:none;
  box-shadow:none;
  background-color:#fff;
  border-radius:0!important;
  font-weight:400;
  width:100%;
  padding:.5em 1em;
}

label {
  display:block;
  margin-bottom:.5em;
}

button,input[type=submit] {
  font-smoothing:antialiased;
  border:none;
  padding:.6em 1em;
}

.sign-up {
  margin:2em 0;
  position:relative;
  perspective: 1000px;
  text-align:center;
}

.sign-up-form {
  max-width:30em;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: translate3d(0,0,0);
  margin:0 auto;
}

.no-flexbox .field {
  width:30%;
  float:left;
}

.no-flexbox .sign-up-btn {
  float:left;
}

.field {
  zoom:1;
  display:block;
  background:#fff;
  position:relative;
  border:1px solid #B7B7B8;
  transform: translate3d(0,0,0);
  overflow:visible;
  margin:0;
  padding:0 .5em;
  &:last-of-type input {
    border-bottom:none;
  }
  &::nth-of-type(1) {
    border-bottom:none;
    border-radius:6px 6px 0 0;
  }
  &:nth-of-type(2),.field:nth-of-type(3) {
    border-top:none;
    border-bottom:none;
    border-radius:0;
  }
  &:nth-of-type(3) input {
    border-right:none;
  }
  &.error:after {
    content:"!";
    font-size:1em;
    line-height:0.6em;
    background:#fff;
    border:2px solid #d2244b;
    color:#d2244b;
    font-weight:700;
    border-radius:100%;
    display:inline-block;
    position:absolute;
    top:0;
    bottom:0;
    right:.5em;
    height:1.2em;
    width:1.2em;
    vertical-align:middle;
    text-align:center;
    animation: pop 200ms forwards cubic-bezier(0.175,.885,.32,1.275);
    margin:auto;
    padding:.2em;
    &:nth-of-type(1):after {
      animation-duration: 100ms;
    }
    &:nth-of-type(2):after {
      animation-duration:200ms;
    }
    &:nth-of-type(3):after {
      animation-duration:300ms;
    }
  }
}

input[type=email],input[type=text] {
  font-weight:100;
  display:block;
  font-smoothing: antialiased;
  border-bottom:1px solid #B7B7B8;
  font-size:.9em;
  padding:.8em .5em;
}

.sign-up-btn {
  width:100%;
  border:1px solid #B7B7B8;
  border-radius:0 0 6px 6px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  &.is-loading {
    color: rgba(255, 255, 255, 0);
  }
}

.sign-up-label {
  margin-bottom:1em;
  color:#698293;
  p {
    line-height:1.5em;
  }
}

.sign-up-success {
  background:#3CC850;
  color:#fff;
  border-radius:6px;
  display:inline-block;
  max-width:100%;
  width:40em;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  min-height:100%;
  transform: rotate3d(1,0,0,-180deg) translateZ(-1px);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  margin:auto;
  padding:4em 2em;
  a {
    color:#fff;
    text-decoration:underline;
  }
}

.flipsies {
  position:relative;
  transform-style: preserve-3d;
}

.is-complete .flipsies {
  animation: flip 800ms forwards;
}

.is-complete .sign-up-form {
  transform: translate3d(0,0,0) translateZ(2px);
}

@media only screen and (min-width: 75em) {
  body {
    font-size:23px;
  }

  .sign-up {
    margin-bottom:1em;
  }
}

@media only screen and (min-width: 42em) {
  .btn,button,input[type=submit] {
    border-radius:0 6px 6px 0;
  }

  input[type=color],input[type=date],input[type=datetime-local],input[type=datetime],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea {
    font-size:.8em;
  }
  .sign-up-form {
    max-width:100%;
    display: flex;
    box-pack: center;
    justify-content:center;
    -ms-flex-pack:center;
    overflow:hidden;
    transform:translate3d(0,0,0);
    padding:0;
  }
  .field {
    border:1px solid #B7B7B8;
    flex:1;
    margin:0;
    padding:0 0 0 .5em;
    }

    .field:nth-of-type(1) {
    border-top:1px solid #B7B7B8;
    border-right:none;
    border-bottom:1px solid #B7B7B8;
    border-left:1px solid #B7B7B8;
    border-radius:6px 0 0 6px;
    }

    .field:nth-of-type(2),.field:nth-of-type(3) {
    border-top:1px solid #B7B7B8;
    border-right:none;
    border-bottom:1px solid #B7B7B8;
    border-left:none;
    border-radius:0;
    }

    .field:nth-of-type(3) input {
    border-right:none;
    }

    input[type=email],input[type=text] {
    display:inline-block;
    border-top:none;
    border-left:none;
    border-bottom:none;
    border-right:1px solid #B7B7B8;
    border-radius:0;
    margin:.5em 0;
    padding:.3em;
    }

    .sign-up-btn {
    border-left:none;
    width:auto;
    border-radius:0 5px 5px 0;
    }

    .sign-up-success {
    padding:.7em 2em;
    }
}