Заставить карту 3D-преобразования пролистать кнопку внутри карты, а не щелкнуть всю карту

Question

У меня есть bootstrap карта с 3D-трансформацией, которая заставляет ее перевернуться. Моя текущая проблема состоит в том, как это щелкнуло, чтобы быть перевернутым. У меня есть jQuery, который позволяет активировать и переворачивать карту целиком, но это не то, что я хотел бы, так как внутри есть интерактивная карусель.

У меня есть элемент <h3> на лицевой стороне карты (внизу) с классом .flip-card-btn, который я бы предпочел, чтобы люди нажимали вместо него. Как я могу этого добиться? Я попытался изменить класс .querySelector на класс flip-card-btn вместо идентификатора #project-card и даже некоторых других фрагментов jquery, но все же не повезло. Буду признателен за помощь в решении этой проблемы. Спасибо!

var card = document.querySelector('#project-card');
card.addEventListener('click', function() {
  card.classList.toggle('is-flipped');
});

/*project card styles start*/

.scene {
  width: 810px;
  height: 430px;
  border: ;
  perspective: 1400px;
}

#project-card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  position: relative;
  border: none;
}

#project-card .card-columns {}

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

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
}

#project-card .card__face--front {
  background: #fff;
  border: 2px solid #001866;
  border-radius: 4px;
  color: #001866;
}

.card__face--back {
  background: #001866;
  color: #fff;
  border: 2px solid #ffd633;
  border-radius: 4px;
  transform: rotateY(180deg);
}


/*project cards container*/

#project-cards-contain {
  max-width: 96%;
  margin: 50px auto 0px 3px;
}

#project-cards-contain .fa {
  color: #001866;
  font-size: 1.5em;
}

#project-cards .card {
  border: none;
}

#project-cards .card-body {
  padding: 0;
}

#project-cards img {
  width: 40%;
  height: 14em;
}

#project-cards p {
  margin-top: 7px;
}

.flip-card-btn {
  font-size: 25px;
  color: #cccccc;
  text-align: right;
  margin-right: 5em;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="scene scene--card card-deck">
  <div id="project-card" class="card">
    <!--web side-->
    <div class="card__face card__face--front">
      <h4 style="text-align:center;">PROJECTS: WEB & DESIGN</h4>
      <div id="project-cards-contain" class="carousel slide" data-ride="carousel">
        <div id="project-cards" class="carousel-inner">
          <div class="carousel-item active">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card1" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card2" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card3" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="card">
              <img class="card-img-top mx-auto" src="assets/images/profile-image.jpg" alt="Project Card4" />
              <div class="card-body text-center">
                <p>My Profile Webpage</p>
              </div>
            </div>
          </div>
        </div>
        <!-- Controls -->
        <a class="carousel-control-prev" href="#project-cards-contain" role="button" data-slide="prev">
          <span class="fa fa-arrow-left" style="color:#001866;" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#project-cards-contain" role="button" data-slide="next">
          <span class="fa fa-arrow-right" style="color:#001866;" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
      <h3 class="flip-card-btn">FLIP CARD</h3>
    </div>
    <!--woodworking side-->
    <div class="card__face card__face--back">
      back
    </div>
  </div>
</div>

Answer 1

В javascript коде вы выбрали # project-card, которая является всем телом вашей карты. И функция щелчка работает везде, где вы нажимаете на теле карты. Если вы хотите, чтобы щелчок EventListener работал только для кнопки / текста FLIP CARD, то вам следует выбрать этот элемент / класс.

Вот мое предложение для javascript:

var card = document.querySelector('.flip-card-btn');
card.addEventListener('click', function() {
  document.querySelector('#project-card').classList.toggle('is-flipped');
});

var back = document.querySelector('.card__face--back');
  back.addEventListener('click', function() {
  document.querySelector('#project-card').classList.toggle('is-flipped');
}); 

Сейчас , она переворачивает вашу карту при нажатии FLIP CARD, однако вы не можете перевернуть ее обратно. Поэтому я добавил eventListener к тексту «назад» на обратной стороне карты, чтобы вернуться на предыдущую позицию.

Надеюсь, это поможет!