QE01

✨ ARISSARA CHANTHARAMANEE

<html>
	<head>
     <style>	
		.card:hover .card-content {
    transform: rotateY(180deg);
}
       .card-content {
   box-shadow: 0 2rem 2rem rgba(0, 0, 0, .5);
   transition: all 2s;
}
       .card {
    perspective: 1000px;
    width: 300px;
}
       .card{
    postition:reative;
}
       .card-back{
    transform:rotateY(180deg);
}
.card:hover .card-front {
    transform: rotateY(-180deg);
}
.card:hover .card-back {
    transform: rotateY(0);
}
.card-content {
    box-shadow: 0 2rem 2rem rgba(0, 0, 0, .5);
    transition: all 2s;
    position:absolute;
    top:0;
    left:0;
    width:100%;
}
       .card-content {
    box-shadow: 0 2rem 2rem rgba(0, 0, 0, .5);
    transition: all 2s;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    backface-visibility: hidden;
}
     </style>

</head>
<body>
  <div class="card">
   <div class="card-content card-front">
      <img src="https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1498&q=80" alt="Dog" />
      <div class="card-body">
         <h3>Dog fact</h3>
         <p> Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times.</p>
      </div>
   </div>
   <div class="card-content card-back">
      <img src="https://images.unsplash.com/photo-1548681528-6a5c45b66b42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80" alt="Cat" />
      <div class="card-body">
         <h3>Cat fact</h3>
         <p>Cats can be lethal hunters and very sneaky, when they walk their back paws step almost exactly in the same place as the front paws did beforehand, this keeps noise to a minimum and limits visible tracks.</p>
      </div>
   </div>
</div>
  </body>
</html>