Untitled

dabblet.css

.contact-form {
  position: relative;
  width: 300px;
  height: 200px;
  perspective: 1000px;
  margin: 80px auto 0; }

.contact-form > .wrapper {
  width: 100%;
  height: 100%; 
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.7s 0s;
  transform-origin: center center;}
  
  .contact-form > .wrapper > .front, .contact-form > .wrapper > .back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; }
 
.contact-form > .wrapper > .back {
    transform: rotateY(180deg); }

  .contact-form > .wrapper {
    transform: rotateY(180deg);
    transition-duration: 0.7s;
    transition-delay: 0s; }
    
.contact-form:target > .wrapper {
transform: rotateY(0deg);}

#content {
  background: grey; }


.contact-form > .wrapper > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  
.contact-form > .wrapper > .front {
  background: lightgrey;
  padding: 20px 20px 20px 40%; }

.top {
  background: lightgrey;;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  height: 65%;
  box-sizing: border-box;
  text-align:center;
 }

dabblet.html

<section class="contact-form" id="front">
	<form class="wrapper">
		<div class="front">
			....
			<a href="#" id="flip2back">Drop me a line !</a>
		</div>
		<div id="content" class="back">
			<div class="top">
				<a href="#front" id="flip" class="a-action">Flip</a>
			</div>
		</div>
	</form>
</section>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}