<form class="login">
    <div>
      <h3>Login</h3>
    </div>
  <input type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"/>
  <input type="password"  placeholder="Password" pattern="[^0-9][A-Za-z]{2,20}"/>
    <input type="submit" />
  </form>
  <div class="login-frame">
    
  </div>
*, *:before, *:after {
  box-sizing: border-box; 
}

html {
  background: #3498db; 
}

.login { 
  background: rgba(black,0.6);
  border-radius: 50%; 
  bottom:0;
  box-shadow: inset 0 0 0.4rem 0.1rem rgba(black,0.6);
  height: 20rem;
  left: 0;
  overflow: hidden;
  margin: auto;
  padding: 3rem;
  right:0;
  position: absolute;
  top:0;
  width: 20rem;
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  z-index: 4;
  
  &:hover div {
    transform: translate(20rem) rotate(180deg) translateZ(0);  
  }
div {
  background: #ecf0f1;
  border-radius: 50%; 
  left: 0;
  height: 100%;
  position: absolute;
  transition: 1.2s transform ease;
  transform: rotate(0deg) translateZ(0); 
  top:0;
  width: 100%;
  z-index: 4;
  
  h3 {
    color: rgba(black,0.2);
    font-size: 3rem;
    line-height: 1.5; 
    text-align: center;
    text-shadow: 0.1rem 0.1rem 0.1rem rgba(white,0.5),-0.1rem -0.1rem 0.1rem rgba(black,0.5);
    text-transform: uppercase;
    width: 100%;
    
    &:before {
      content: '\f023';
      display: block;
      font-family: FontAwesome;    
      font-size: 5rem;
      height: 6rem;
      line-height: 1;  
    }
}


}

}
.login-frame {
  background: rgba(black,0.2);
  border-radius: 50%; 
  box-shadow: 0 0 4px rgba(black,0.4),inset 0 0 4px rgba(black,0.4);
  height: 22rem;
  bottom:0;
  left: 0;
  margin: auto;
  position: absolute;
  right:0;
  top:0;
  width: 22rem;
  z-index: 3;
}

input {
   border: 0;
  border-radius: 2rem;
  display: block;
  height: 3rem;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  outline: none;
  width: 100%;
}

input[type="submit"] {
 background: #f39c12; 
}
View Compiled

External CSS

  1. //netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js