Css翻转X轴jumbotron - Bootsrap

Question

我一直试图从jumbotron的中间翻转x的jumbotron，即y / 2，但是当我盘旋时它只是试图从起点翻转（y = 0）。我怎样才能从中间翻转它，保持我的宽度和高度为100％的jumbotron。 这是我的代码：

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f1_card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);

  -webkit-box-shadow: 5px -5px 5px #aaa;
  -moz-box-shadow: 5px -5px 5px #aaa;
  box-shadow: 5px -5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateX(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container">
<br><br>
<div class="row">
  <div class="col-sm-6">
    <font><span class="tag-headline">blahhh
  easier...</span>
    </font>
    </br>
    
    </div>
    <div class="col-sm-6">
    <div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
<div class="jumbotron ">
 <fieldset>
    <form role="form" class='form-horizontal'>
    <legend><h2>Sign Up</h2></legend>
    <div class="form-group">
      <label for="inputName" class="col-lg-2 control-label">Name</label>
      <div class="col-lg-10">
        <input class="form-control" id="namefield" placeholder="Name" type="text" ng-model="user.name">
      </div>
    </div>
    <div class="form-group">
      <label for="inputMobile" class="col-lg-2 control-label">Mobile</label>
      <div class="col-lg-10">
        <input class="form-control" id="mobilefield" placeholder="Mobile" type="text" ng-model="user.mobileNumber">
      </div>
    </div>
     <div class="form-group">
      <label for="inputMobile" class="col-lg-2 control-label">Ethnicity</label>
      <div class="col-lg-10">
		<select class="form-control boxconf" ng-model="user.ethnicity">
				<option></option>
				<option>Bengali</option>
				<option>Marathi</option>
				<option>Punjabi</option>
				<option>Gujarti</option>
				<option>Kannada</option>
				<option>Telgu</option>
		</select>
      </div>
    </div>
    <div class="form-group">
      <label for="inputPassword" class="col-lg-2 control-label">Password</label>
      <div class="col-lg-10">
        <input class="form-control" id="inputPassword" placeholder="Password" type="password" ng-model="user.password">
      </div>
    </div>
        <div class="form-group">
        <div class="col-lg-10 text-size-small">
       By clicking Sign Up, you agree to our Terms and that you have read our Data Policy, including our Cookie Use.
       </div>
    </div>
    
    <div class="form-group">
      <div class="col-lg-10">
        <button type="submit" class="btn btn-primary" ng-click="signUp()">Sign Up</button>
      </div>
    </div>
    </form>
  </fieldset>
</div>

		</div>
 		 <div class="back face center">
  		<div class="jumbotron col-sm-6">
		<fieldset>
  		<form role="form" class='form-horizontal'>
    	<legend><h2>Sign Up</h2></legend>	
    	<br>
    	<font>Account Created</font>
    	</div>
		</div>
</div>

  
</div>
</div>
</div>

任何人都可以帮我吗？