Edit in JSFiddle

Result
CSS
HTML

 .wrap {
   margin: 2em 3em;
   position: relative;
   border: 1px solid #ccc;
   height: 200px;
   display: inline-block;
   width: 200px;
 }

 .ori,
 .trans {
   width: 150px;
   height: 100px;
   border: 1px solid #7a0006;
   background: #cf0009;
   left: 50%;
   top: 50px;
   margin-left: -75px;
   position: absolute;
 }

 .ori {
   z-index: 0;
   opacity: 0.1;
 }

 .trans {
   z-index: 10;
   opacity: 0.5;
   background-color: #1564cf;
   transition: transform 1s;
 }

 .backface {
   perspective: 400px;
 }

 .visibility {
   backface-visibility: visible;
 }

 .visibility_h {
   backface-visibility: hidden;
 }

 .visibility:hover {
   transform: rotateY(180deg);
 }

 .visibility_h:hover {
   transform: rotateY(180deg);
 }

<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body>
    <div class="wrap backface">
      visible
      <div class="ori"></div>
      <div class="trans visibility">visible</div>
    </div>
    <div class="wrap backface">
      hidden
      <div class="ori"></div>
      <div class="trans visibility_h">hidden</div>
    </div>
  </body>
</html>