<div class="content-inner">
  <div class="content-front">
    <div class="cf-inner">
      <div class="inner">
        <h1>Front side</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
  <div class="content-back">
    <div class="cf-inner">
      <div class="inner">
        <h1>Back side</h1>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</div>

body {
  margin: 0;
  background: #a1a1a1;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items:center;
}

.content-inner {
  height: 250px;
  width: 250px;
  color: #fff;
  // Effect
  position: relative;
  transform-style: preserve-3d;
  perspective: 1000px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  // Animation
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all .8s cubic-bezier(.25,.1,.11,1.1);
  > * {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all .8s cubic-bezier(.25,.1,.11,1.1);
  }
  &:hover {
    .content-front {
      transform: rotateY(-180deg);
    }
    .content-back {
      transform: rotateY(0deg);
    }
  }
  .content-front,
  .content-back {
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .content-front {
    background: #000;
  }
  .content-back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: rotateY(180deg);
    background: #f00;
  }
  .cf-inner {
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    .inner {
      align-items: stretch;
      transform-style: preserve-3d;
      perspective: 1000px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      transform: translateZ(95px) scale(.81);
      text-align: center;
    }
  }
}