A simple modal popup experiment using CSS transitions and transforms. Created at http://sassmeister.com

SassMeister-input-HTML.html

<div class="container flipped">
<p>Container View</p>
<p><button class="btn-open" type="submit">Reopen modal</button></p>
</div>

<div class="modal">
  <div class="modal-popup">
    <h1>Welcome.</h1>
    <div class="modal-popup__field">
    <p>
      <input type="text" id="name" name="name" placeholder="enter name to join">
      <span class="error">Please enter a valid name</span>
    </p>
    </div>
    <p><button class="btn-join" type="submit">Join</button></p>
  </div>
</div>

<script>
  var container = document.querySelector('.container');
  var nameErrorLabel = document.querySelector('.error')
  var joinBtn = document.querySelector('.btn-join');
  var openBtn = document.querySelector('.btn-open');
  
  // Click listener for join button
  // Collapses modal if name is specified
  joinBtn.addEventListener('click', function(){
    var name = document.getElementById('name');
    if(name.value.trim() != '') {
      container.classList.remove('flipped');
      nameErrorLabel.style.display = "";
      // Clear Value
      name.value = '';
    } else {
      // Name not valid/empty
      nameErrorLabel.style.display = "block";
    };
  });
  
  // Keydown Event
  document.getElementById('name').addEventListener('keydown', function(){
    nameErrorLabel.style.display = "";
  });
  
  // Trigger modal again
  openBtn.addEventListener('click', function() {
    container.classList.add('flipped');
  });
</script>

SassMeister-input.scss

// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// Bourbon (v3.2.0.beta.1.a)
// ----

@import "bourbon/bourbon";

// Global Variables
$global-radius: 5px;

// Colors
$red: #FF4136;
$orange: #FF851B;
$light-blue: #7fdbff;
$white: #ffffff;
$gray: #555555;

// CUSTOM MIXINS
@mixin border-radius($radius: $global-radius) {
    border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    -o-border-radius: $radius;
    -ms-border-radius: $radius;
}

* {
  @include box-sizing(border-box);
}

html {
  font-size: 16px;
}
body {
  background: $gray;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

.container {
  background: $light-blue;
  height: 100%;
  padding: 20px;
  position: absolute;
  width: 100%;
  @include transition(-webkit-transform ease-out 0.3s);
  @include transform-origin(50% 100%);
  
  &.flipped {
    @include transform(perspective(600px) rotateX(10deg));
    
    & + .modal {
      opacity: 1;
      top: 0;
      
      .modal-popup {
        @include transform(scale(1));
      }
    }
  }
}

.modal {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  opacity: 0;
  position: fixed;
  top: -100%;
  width: 100%;
  -webkit-transition: opacity linear 0.2s;
  
  .modal-popup {
    background: $orange;
    color: $white;
    min-height: 230px;
    padding: 15px;
    left: 50%;
    margin: -150px 0 0 -150px;
    position: absolute;
    top: 50%;
    width: 300px;
    
    @include border-radius();
    @include transform(scale(0.5));
    @include transition(-webkit-transform cubic-bezier(1.000, -0.530, 0.405, 1.425) .3s);
    
    &__field {
      position: relative;  
    }
    
    h1 {
      margin: 40px 0 20px;
      text-align: center;
      text-transform: uppercase;
    }
    
    p {
      font-size: em(14,16);
      text-align: center;
    }
    
    label {
      display: block;
      margin-bottom: 10px;
    }

    input {
      border: 0 none;
      display:block;
      font-size: em(15);
      line-height: 1.5;
      margin: 0 auto;
      padding: 15px 10px;
      width: 70%;
      
      border-radius: 5px;
      
    }
    
    .error {
      background-color: $red;
      border-radius: 5px;
      color: #ffffff;
      display: none;
      left: em(45);
      margin: 0 auto;
      padding: 10px;
      position: absolute;
      top: em(-50);
      width: 70%;
      
      &:before {
        bottom: -10px;
        content: '';
        border-top: 10px solid #ff4136;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        left: 45%;
        position: absolute;
      }
      
      & + input {
        margin-top: 45px;
      }
    }
    
    button[type="submit"] {
      background: none transparent;
      border: 2px solid #ffffff;
      border-radius: 5px;
      color: #ffffff;
      display: block;
      font-size: em(18);
      margin: 0 auto;
      padding: 10px 20px;
      
      &:hover {
        background-color: rgba(255,255,255,0.2);
        cursor: pointer;
      }
    }
    
  }
}

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  background: #555555;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

.container {
  background: #7fdbff;
  height: 100%;
  padding: 20px;
  position: absolute;
  width: 100%;
  -webkit-transition: -webkit-transform ease-out 0.3s;
  -moz-transition: -webkit-transform ease-out 0.3s;
  transition: -webkit-transform ease-out 0.3s;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.container.flipped {
  -webkit-transform: perspective(600px) rotateX(10deg);
  -moz-transform: perspective(600px) rotateX(10deg);
  -ms-transform: perspective(600px) rotateX(10deg);
  -o-transform: perspective(600px) rotateX(10deg);
  transform: perspective(600px) rotateX(10deg);
}
.container.flipped + .modal {
  opacity: 1;
  top: 0;
}
.container.flipped + .modal .modal-popup {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.modal {
  background: rgba(0, 0, 0, 0.7);
  height: 100%;
  opacity: 0;
  position: fixed;
  top: -100%;
  width: 100%;
  -webkit-transition: opacity linear 0.2s;
}
.modal .modal-popup {
  background: #ff851b;
  color: white;
  min-height: 230px;
  padding: 15px;
  left: 50%;
  margin: -150px 0 0 -150px;
  position: absolute;
  top: 50%;
  width: 300px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transition: -webkit-transform cubic-bezier(1, -0.53, 0.405, 1.425) 0.3s;
  -moz-transition: -webkit-transform cubic-bezier(1, -0.53, 0.405, 1.425) 0.3s;
  transition: -webkit-transform cubic-bezier(1, -0.53, 0.405, 1.425) 0.3s;
}
.modal .modal-popup__field {
  position: relative;
}
.modal .modal-popup h1 {
  margin: 40px 0 20px;
  text-align: center;
  text-transform: uppercase;
}
.modal .modal-popup p {
  font-size: 0.875em;
  text-align: center;
}
.modal .modal-popup label {
  display: block;
  margin-bottom: 10px;
}
.modal .modal-popup input {
  border: 0 none;
  display: block;
  font-size: 0.9375em;
  line-height: 1.5;
  margin: 0 auto;
  padding: 15px 10px;
  width: 70%;
  border-radius: 5px;
}
.modal .modal-popup .error {
  background-color: #ff4136;
  border-radius: 5px;
  color: #ffffff;
  display: none;
  left: 2.8125em;
  margin: 0 auto;
  padding: 10px;
  position: absolute;
  top: -3.125em;
  width: 70%;
}
.modal .modal-popup .error:before {
  bottom: -10px;
  content: '';
  border-top: 10px solid #ff4136;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  left: 45%;
  position: absolute;
}
.modal .modal-popup .error + input {
  margin-top: 45px;
}
.modal .modal-popup button[type="submit"] {
  background: none transparent;
  border: 2px solid #ffffff;
  border-radius: 5px;
  color: #ffffff;
  display: block;
  font-size: 1.125em;
  margin: 0 auto;
  padding: 10px 20px;
}
.modal .modal-popup button[type="submit"]:hover {
  background-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}

SassMeister-rendered.html

<div class="container flipped">
<p>Container View</p>
<p><button class="btn-open" type="submit">Reopen modal</button></p>
</div>

<div class="modal">
  <div class="modal-popup">
    <h1>Welcome.</h1>
    <div class="modal-popup__field">
    <p>
      <input type="text" id="name" name="name" placeholder="enter name to join">
      <span class="error">Please enter a valid name</span>
    </p>
    </div>
    <p><button class="btn-join" type="submit">Join</button></p>
  </div>
</div>

<script>
  var container = document.querySelector('.container');
  var nameErrorLabel = document.querySelector('.error')
  var joinBtn = document.querySelector('.btn-join');
  var openBtn = document.querySelector('.btn-open');
  
  // Click listener for join button
  // Collapses modal if name is specified
  joinBtn.addEventListener('click', function(){
    var name = document.getElementById('name');
    if(name.value.trim() != '') {
      container.classList.remove('flipped');
      nameErrorLabel.style.display = "";
      // Clear Value
      name.value = '';
    } else {
      // Name not valid/empty
      nameErrorLabel.style.display = "block";
    };
  });
  
  // Keydown Event
  document.getElementById('name').addEventListener('keydown', function(){
    nameErrorLabel.style.display = "";
  });
  
  // Trigger modal again
  openBtn.addEventListener('click', function() {
    container.classList.add('flipped');
  });
</script>

Quickly mocked together a prototype of a username entry area, combined with some css transitions. This is just a simple experiment and is not to be used in a production environment.