<div class="container">
  
  <div class="card-box">
    <div class="card">
      <div class="card-front">
        <i class="fas fa-moon"></i>
      </div>

      <div class="card-back">
        <p>1</p>
      </div>
     </div>
  </div>
  
  <div class="card-box-2d">
    <div class="card">
      <div class="card-front">
        <i class="fas fa-star"></i>
      </div>

      <div class="card-back">
        <p>3</p>
      </div>
     </div>
  </div>

  <div class="card-box-3d">
    <div class="card">
      <div class="card-front">
        <i class="fas fa-heart"></i>
      </div>

      <div class="card-back">
        <p>6</p>
      </div>
     </div>
  </div>
 
</div>

body {
  font-family: 'Coiny', cursive;
  font-size: 60px;
  margin: 30px 0;
}

.container {
  display: flex;
  justify-content: center;
}

.card-box {
  color: #191970;
  width: 30%;
  max-width: 200px;
  height: 250px;
  position: relative;
  margin: 0 1.5%;
  
  .card-front,
  .card-back {//カードのデザイン
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    border: 1px solid #333;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  &:hover {//hoverしたらcard-backが上
    .card {     
      .card-front {
        z-index: 0;
      }
      
      .card-back {
        z-index: 1;
      }
    }
  }
  
  .card {    
    .card-front,
    .card-back {
      position: absolute;
      backface-visibility: hidden;
    }
    
    .card-front {//通常時はcard-frontが上
      z-index: 2;
    }
    
    .card-back {
    }
  }
}

.card-box-2d {
  color: #ffa500;
  
  width: 30%;
  max-width: 200px;
  height: 250px;
  position: relative;
  margin: 0 1.5%;
  
  .card-front,
  .card-back {//カードのデザイン
    width: 100%;
    height: 250px;
    background: #f5f5f5;
    border: 1px solid #333;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  &:hover {
    .card {//hoverしたらY180度回転
      transform: rotateY(180deg);
      
      .card-front {
        z-index: 0;
      }
      
      .card-back {
        z-index: 1;
      }
    }
  }
  
  .card {//0.8sの速さでY180度回転
    transform-style: preserve-3d;
    transition: all 0.4s ease-in;
    
    .card-front,
    .card-back {
      position: absolute;
      backface-visibility: hidden;
    }
    
    .card-front {
      z-index: 2;
    }
    
    .card-back {
      transform: rotateY(180deg);
    }
  }
}

.card-box-3d {
  color: #dc143c;
  
  width: 30%;
  max-width: 200px;
  height: 250px;
  margin: 0 1.5%;
  position: relative;
  -webkit-perspective: 400px;
  perspective: 400px;
  
  .card-front,
  .card-back {//カードのデザイン
    width: 100%;
    height: 250px;
    background: #f5f5f5;
    border: 1px solid #333;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  
  &:hover {
    .card {//hoverしたらY180度回転
      transform: rotateY(180deg);
      
      .card-front {
        z-index: 0;
      }
      
      .card-back {
        z-index: 1;
      }
    }
  }
  
  .card {//0.8sの速さでY180度回転
    transform-style: preserve-3d;
    transition: all 0.4s ease-in;
    
    .card-front,
    .card-back {
      position: absolute;
      backface-visibility: hidden;
    }
    
    .card-front {
      z-index: 2;
    }
    
    .card-back {
      transform: rotateY(180deg);
    }
  }
}