CSS backface-visibility Property - Playground Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.flip { 
   perspective: 800px; 
} 
.card { 
   position: relative; 
   width: 250px; 
   height: 273px;
   transition: transform 1s; 
   transform-style: preserve-3d; 
} 
.card:hover { 
   transform: rotateY(180deg); 
} 
.card-face { 
   position: absolute; 
   top: 0; 
   bottom: 0; 
   backface-visibility: hidden;
} 
.card-face.back { 
   padding: 20px; 
   transform: rotateY(180deg); 
   background: #4B846A;
   color: #fff; 
}
</style>
</head>
<body>
<figure class="flip"> 
   <div class="card"> 
      <img src="images/sunset.jpg" alt="Sunset" class="card-face front"> 
      <figcaption class="card-face back">Sunset Image on the flip side.</figcaption> 
   </div> 
</figure> 
</body>
</html>