LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Click Sign Up

Sign Up

Login

Log In

Sign Up

CSS
@import url(https://fonts.googleapis.com/css?family=Lato);
@-webkit-keyframes shadow {
  0% {
    background-color: transparent;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  5% {
    background-color: transparent;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  40% {
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-filter: blur(40px);
            filter: blur(40px);
  }
  50% {
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-filter: blur(50px);
            filter: blur(50px);
  }
  65% {
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-filter: blur(40px);
            filter: blur(40px);
  }
  95% {
    background-color: transparent;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  100% {
    background-color: transparent;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
@keyframes shadow {
  0% {
    background-color: transparent;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  5% {
    background-color: transparent;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  40% {
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-filter: blur(40px);
            filter: blur(40px);
  }
  50% {
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-filter: blur(50px);
            filter: blur(50px);
  }
  65% {
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-filter: blur(40px);
            filter: blur(40px);
  }
  95% {
    background-color: transparent;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
  100% {
    background-color: transparent;
    -webkit-filter: blur(0);
            filter: blur(0);
  }
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  background: #DDF0FF;
}
@media screen and (min-width: 40em) and (min-height: 451px) {
  body {
    background: -webkit-radial-gradient(center ellipse, #ddf0ff 0%, #ddf0ff 50%, #ace1dd 100%);
    background: radial-gradient(ellipse at center, #ddf0ff 0%, #ddf0ff 50%, #ace1dd 100%);
  }
}

.form-card-container {
  width: 90%;
  height: 375px;
  margin: 0 auto;
  -webkit-perspective: 300px;
          perspective: 300px;
}
@media screen and (min-width: 40em) {
  .form-card-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

.shadow {
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: #777;
  box-shadow: inset 0 0 10px 8px rgba(0, 0, 0, 0.3);
}
.shadow.shadow--flipping::before, .shadow.shadow--flipping::after {
  content: '';
  position: absolute;
  top: 75px;
  left: 0;
  width: 100%;
  height: 225px;
  -webkit-animation: shadow 650ms 150ms ease-in-out;
          animation: shadow 650ms 150ms ease-in-out;
}

.form-card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 800ms;
  transition: -webkit-transform 800ms;
  transition: transform 800ms;
  transition: transform 800ms, -webkit-transform 800ms;
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* easeInOutBack */
}
.form-card.form-card--flipped {
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
}

.form-card__front,
.form-card__back {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #DDF0FF;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.form-card__back {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}

.form__title {
  font-family: "Lato", sans-serif;
  font-size: 2em;
  color: #223127;
  clear: right;
}

.form__swap-link {
  float: right;
  font-family: "Lato", sans-serif;
  font-size: .75em;
  color: #223127;
  text-decoration: none;
}

.form {
  padding: 20px 0;
}

.form__label {
  margin-top: 15px;
  font-family: "Lato", sans-serif;
  color: #223127;
}

.form__input {
  display: block;
  width: 100%;
  margin: 5px 0 20px;
  padding: 10px 5px;
}

.form__button {
  float: right;
  padding: 6px 10px;
  font-family: "Lato", sans-serif;
  font-size: 1em;
  color: #223127;
  border-radius: 3px;
  border: none;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}
JS
$('.form__swap-link').click(function() {
  $('.form-card').toggleClass('form-card--flipped');
  $('.shadow').addClass('shadow--flipping'); 
  setTimeout(function() {
    $('.shadow').removeClass('shadow--flipping');
  }, 800); //must match .form-card transition
});
Host Instantly Drag and Drop Website Builder

 

Description

Using CSS 3d transform, this is a quick way to swap from one form to the other. without having to navigate to another page.
Term
Wed, 11/29/2017 - 11:25

Related Codes

Pen ID
Pen ID
Pen ID