Как выровнять элемент по центру страницы после эффекта flip?

Question

Виталий @Scorpiored88

HTML
CSS

Как выровнять элемент по центру страницы после эффекта flip?

Всем доброго.
Сделал я 4 ячейки, по нажатию на которою производится ефект flip с увеличениям "внутренней" стороны ячейки

HTML:

<div class="container">
      <div class="row" style="height: 600px;text-align: center ; padding: 20px">

        <div class="col-md-3 col-lg-3 maincard flip">
          <div class="card">
            <div class="face front"><img src="/images/settings.svg">
              <p>Ipsec</p>
            </div>
            <div class="face back">

            </div>
          </div>

        </div>


        <div class="col-md-3 col-lg-3 maincard">
          <div class="card">
            <div class="face front"><img src="/images/settings.svg">
              <p>gre tunelc</p>
            </div>
            <div class="face back">

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


        <div class="col-md-3 col-lg-3 maincard">
          <div class="card">
            <div class="face front"><img src="/images/settings.svg">
              <p>dst nat</p>
            </div>
            <div class="face back">

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


        <div class="col-md-3 col-lg-3 maincard">
          <div class="card">
            <div class="face front"><img src="/images/settings.svg">
              <p>ch GRE</p>
            </div>
            <div class="face back">

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







      </div>
    </div>

и CSS:

.maincard {
  height: 200px;
  border-radius: 5%;
  padding: 10px;
  -webkit-perspective: 800;
  -ms-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
}

.maincard div {
  border-radius: 5%;
  border: 1px solid white;
}

.maincard .card.flipped {
  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */
}
.maincard .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
  -moz-transform-style: preserve-3d;
  -moz-transition: 0.5s;
  -ms-transform-style: preserve-3d;
  -ms-transition: 0.5s;
  -o-transform-style: preserve-3d;
  -o-transition: 0.5s;
  transform-style: preserve-3d;
  transition: 0.5s;
}
.maincard .card .face {
  width: 100%;
  height: 100%;
  text-align: center;
  backface-visibility: hidden;  /* W3C */
  -webkit-backface-visibility: hidden; /* Safari & Chrome */
  -moz-backface-visibility: hidden; /* Firefox */
  -ms-backface-visibility: hidden; /* Internet Explorer */
  -o-backface-visibility: hidden; /* Opera */

}
.maincard .card .front {
  position: absolute;
  z-index: 1;
  background-color: #6282ff;
  color: white;
  cursor: pointer;
}
.maincard .card .back {
  background: white;
  color: black;
  cursor: pointer;
  width: 500px;
  height: 300px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;


  transform:rotatey(-180deg);
  -ms-transform:rotatey(-180deg); /* IE 9 */
  -moz-transform:rotatey(-180deg); /* Firefox */
  -webkit-transform:rotatey(-180deg); /* Safari and Chrome */
  -o-transform:rotatey(-180deg); /* Opera */

}

Но вот столкнулся с проблемой - после переворота,левая ячейка после увеличения не влазит,и часть уходит за страницу.
Как можно сделать,чтобы после flipa ячейка увеличивалась и выравнивалась по центру страницы ?