CodePen

HTML

            
              <p><em>Try switching from <strong>Log In</strong> to <strong>Register</strong> ;)</em><br><a href='http://caniuse.com/#feat=transforms3d' target='_blank'>Works in browsers that support 3D transforms</a></p>
<div class='card'>
  <div class='face'>
    <h2>Log In</h2>
    <form>
      <input type='text' placeholder='Username'>
      <input type='text' placeholder='Password'>
      <input type='submit' value='Log In' class='btn'>
    </form>
    <p>If you don't already have an account, you can</p>
    <button class='switch btn'>Register</button>
  </div>
  <div class='face'>
    <h2>Register</h2>
    <form>
      <input type='text' placeholder='Username'>
      <input type='text' placeholder='First Name'>
      <input type='text' placeholder='Last Name'>
      <input type='text' placeholder='Email Address'>
      <input type='text' placeholder='Password'>
      <input type='text' placeholder='Confirm Password'>
      <input type='submit' value='Register' class='btn'>
    </form>
    <p>If you already have an account, you can</p>
    <button class='switch btn'>Log In</button>
  </div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              * { margin: 0; padding: 0;}
html, body {
  height: 100%;
  font: 100%/1.4 'Century Gothic', Verdana, sans-serif;
  perspective: 50em;
}
p { padding: 1em; text-align: center; }
.card {
  position: relative;
  margin: 1em auto;
  width: 15em;
  transform-style: preserve-3d;
  transition: transform 1.5s linear;
}
.flipped {
  transform: rotateY(180deg);
}
.card .face {
  position: absolute;
  top: 0; right: 0; left: 0;
  padding: .5em;
  border-radius: .25em;
  box-shadow: 1px 1px .3em;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
.card .face:last-child {
  transform: rotateY(180deg);
}
.card h2 {
  text-align: center;
}
.card input, .card button {
  display: block;
  margin: 1em auto;
  border: none;
  padding: .25em;
  width: 90%;
  border-radius: .25em;
  font-size: 1em;
}
.card input[type=text] {
  border-bottom: dashed 1px dimgrey;
}
.card .btn {
  position: relative;
  background: linear-gradient(gainsboro, grey);
  text-shadow: 0 2px 0 white;
  cursor: pointer;
}
.card input:focus, .card button:focus {
  border-color: transparent;
  outline: none;
  box-shadow: 1px 1px .35em dodgerblue;
}
.card .btn:hover, .card .btn:focus {
  background: linear-gradient(lightblue, dodgerblue);
}
.card .btn:active {
  top: 1px;
  background: linear-gradient(greenyellow, limegreen);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var c = document.querySelector('.card'), 
    switchers = c.querySelectorAll('.switch');

for(var i = 0; i < switchers.length; i++) {
  switchers[i].addEventListener('click', function(){
    c.classList.toggle('flipped');
  }, false);
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................