有没有办法只翻转表格单元格？

Question

我正在制作一个日历，供用户单击每个表格单元格并将其翻转。我只需要翻转表格单元格就需要帮助，我正在翻转所有行。

.calendar {
  position: relative;
  background-image: linear-gradient(#FFAFBD, #ffc3a0);
  width: 1000px;
  height: 600px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 15px solid #fff;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .5);
}

.calendar .date {
  padding: 30px;
}

.calendar .date h2 {
  position: absolute;
  left: 40%;
  top: -8%;
  padding: 0;
  font-size: 60px;
  font-weight: 500;
  text-align: center;
}

.calendar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  clear: both;
  width: 100%;
}

.calendar li {
  display: block;
  float: left;
  width: 14.2857142857%;
  padding: 27px;
  box-sizing: border-box;
  border: 1px solid #000;
  margin-right: -1px;
  margin-bottom: -1px;
}

.main {
  perspective: 600px;
}

.card {
  width: 100%;
  height: 10%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.days_face {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
}

.days__face--front {
  background: red;
}

.day__face--back {
  background: url(leaves2.png);
  transform: rotateY( 180deg);
}

.card.is-flipped {
  transform: rotateY(180deg);
}

<div class="calendar">
  <div class="date">
    <h2> January </h2>
    <ul>
      <div class="main">
        <div class="card">
          <div class="days">
            <li>
              <div class="day__face--front">SUN</div>
            </li>


            <li>
              <div class="day">MON</div>
            </li>
            <li>
              <div class="day">TUE</div>
            </li>
            <li>
              <div class="day">WED</div>
            </li>
            <li>
              <div class="day">THUR</div>
            </li>
            <li>
              <div class="day">FRI</div>
            </li>
            <li>
              <div class="day">SAT</div>
            </li>
          </div>
        </div>
      </div>
      <script>
        var card = document.querySelector('.card');
        card.addEventListener('click', function() {
          card.classList.toggle('is-flipped');
        });
      </script>

我计划如果用户单击一个表格单元格，它将翻转并显示像拼图一样的图片的一部分。

我希望每天只翻转一个表格单元格