<div class="align">
<div class="card-container">  
  <div class="card-vertical">
    <div class="card-front">
      <article class="card-front-content">
      <h1>Animal </h1>
      <p>Hover Me</p>
        <p>Vertical 3D Card Flipping</p>
      <article>
    </div>
    <div class="card-back">
      <article class="card-back-content">
        <h1>The Dog</h1>
        <img src="http://i.imgsafe.org/ab5b14f.jpg" > 
       <article>
    </div>
  </div>
</div>
<div class="card-container">
    <div class="card-horizontal">
        <div class="card-front"> 
          <article class="card-front-content">
            <h1>The Food</h1>
            <p>Hover Me</p>          <p>Horizontal 3D Card Flipping</p>
          <article>
        </div>
        <div class="card-back card-back-hr">
          <article class="card-back-content">
        <h1>Salad</h1>
        <img src="http://i.imgsafe.org/acb6ffc.jpg" > 
       <article>
        </div>
    </div>
</div>

  <div class="card-container">  
  <div class="card-vertical">
    <div class="card-front">
      <article class="card-front-content">
            <h1>The City </h1>
            <p>Hover Me</p>
        <p>Vertical 3D Card Flipping</p>
       <article>
    </div>
    <div class="card-back">
     <article class="card-back-content">
        <h1>Random City</h1>
        <img src="http://i.imgsafe.org/ab5b14f.jpg" > 
       <article>
    </div>
  </div>
</div>
<div class="card-container">
    <div class="card-horizontal">
        <div class="card-front"> 
          <article class="card-front-content">
            <h1>Nature </h1>
            <p>Hover Me</p>
            <p>Horizontal 3D Card Flipping</p>
          <article>
        </div>
        <div class="card-back card-back-hr">
           <article class="card-back-content">
        <h1>Sea </h1>
        <img src="http://i.imgsafe.org/b0b7ba8.jpg" > 
       <article>
        </div>
    </div>
</div>

</div>

body{background:#fbe9e7; position:relative;height:100%;width:100%;max-width:600px;overflow:auto; margin:0 auto;}
h1{text-align:center;font-size:2em;font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}
img{width:100%; height:100%; margin-top:10px; border-radius:.12em; box-shadow:0 0 0 2px #fff;}
.align{
  padding-top:20px;
  width:100%;
  height:580px;
  display:flex;
  flex-flow:row wrap;
  justify-content:space-around;
  align-items:space-around;
}
.card-container{
  -webkit-perspective:1200;
  -moz-perspective:1200;
  perspective:1200;
}
.card-vertical, .card-horizontal{
  height:250px;
  width:250px;
  box-shadow: 0 6px 8px #bbb;
  -moz-transform-style:preserve-3d;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;

  transition:all .4s ease;
 }
.card-front, .card-back{
  color:#fafafa;
  height:100%;
  width:100%;
  position:absolute;
  background:#ff5252;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  transform-style:preserve-3d;
 }
.card-back{
  -moz-transform:rotateY(179.9deg);
  -webkit-transform:rotateY(179.9deg);
  transform:rotateY(179.9deg);
  background:#8d6e63 ;
 }
.card-front-content, .card-back-content{
  padding:2em;
  box-sizing:border-box;
  text-align:center;
  line-height:2.6em;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  
}

.card-back-hr{
  -webkit-transform:rotateX(179.9deg);
  -moz-transform:rotateX(179.9deg);
  transform:rotateX(179.9deg);
}
.card-vertical:hover{
  -webkit-transform:rotateY(179.9deg);
  -moz-transform:rotateY(179.9deg);
  transform:rotateY(179.9deg);
}
.card-horizontal:hover{
  -webkit-transform:rotateX(179.9deg);
  -moz-transform:rotateX(179.9deg);
  transform:rotateX(179.9deg);
}