Изменение класса CSS с идентификатором JavaScript мешает стилю CSS?

Question

Я пытаюсь создать HTML-адаптивную веб-страницу с карточками, которые переворачиваются на 180 градусов, когда вы нажимаете на них, и после того, как я изменил класс div с идентификатором события onclick, мой CSS-стиль испортился и случайно поместил карточки на экран.Как я могу это исправить?

Я попытался скопировать стиль CSS-класса в стиль id, но это разрушило анимацию.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {     //all of the divs are in a container div
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem auto;
}

.card-flip, #misto1, #misto2, ....{
  position: relative;
  margin: 1rem;
}
.card-flip-faces, #misto1, #misto2,.... {
    -webkit-animation-play-state: paused;
  transition: all ease .5s;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: perspective(600px) rotateY(0deg);
          transform: perspective(600px) rotateY(0deg);
}
.card-flip .card-flip-faces   {
  -webkit-transform: perspective(600px) rotateY(180deg);
          transform: perspective(600px) rotateY(180deg);
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.25);
}
.card-flip-front, .card-flip-back {
  padding: 2rem;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: all ease .5s;
}
.card-flip-front  {
  display: block;
  color: #11998e;
  background-color: white;
}
.card-flip-back  {
  position: absolute;
  top: 0;
  color: white;
  background-color: #11998e;
  -webkit-transform: perspective(600px) rotateY(180deg);
          transform: perspective(600px) rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.card-flip-icon {
  font-size: 600%;
}
.card-flip-title {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
}

@media screen and (max-width: 576px) {
  .card-flip {
    width: calc(100% - 2rem);
  }
}
@media screen and (min-width: 576px) {
  .card-flip {
    width: calc(50% - 2rem);
  }
}
@media screen and (min-width: 992px) {
  .card-flip {
    width: calc(33.33% - 2rem);
  }
}

<!-- This is how all of my divs look like -->

<div id="misto1" onclick="handler_click1()"> <!--before id it was class="card-flip-->
		<div class="card-flip-faces">
			<div class="card-flip-front">
                <i class="card-flip-icon fas fa-flask"></i>
				<h4 class="card-flip-title">Title</h4>
				<p class="card-flip-text">Some text</p>
			</div>
			<div class="card-flip-back">
				<i class="card-flip-icon fas fa-flask"></i>
				<h4 class="card-flip-title">Hemoleucograma</h4>
				<p class="card-flip-text"> Another fancy text</p>
			</div>
		</div>
	</div>

<div id="misto2" onclick="handler_click2()">
		<div class="card-flip-faces">
			<div class="card-flip-front">
                <i class="card-flip-icon fas fa-flask"></i>
				<h4 class="card-flip-title">Title</h4>
				<p class="card-flip-text">Some text</p>
			</div>
			<div class="card-flip-back">
				<i class="card-flip-icon fas fa-flask"></i>
				<h4 class="card-flip-title">Hemoleucograma</h4>
				<p class="card-flip-text"> Another fancy text</p>
			</div>
		</div>
	</div>
<!-- this is the script for the onclick animation -->

<script type="text/javascript">
    var x=0;
    function handler_click1(){
        
        if(x==0){
            document.getElementById('misto1').className ='card-flip';
            x=1;
        }
        else{
            document.getElementById('misto1').className ='card-flip-faces';
            x=0;
            
        }
    
    }
        
    function handler_click2(){
        
        if(x==0){
            document.getElementById('misto2').className ='card-flip';
            x=1;
        }
        else{
            document.getElementById('misto2').className ='card-flip-faces';
            x=0;
            
        }
    
    }
</script>

Answer 1

Предполагаемый метод добавления и удаления определенных классов заключается в использовании Element.classList, который поддерживает методы .add, .remove и .toggle.

Эти методыможет даже быть перегружен дополнительными строковыми аргументами для изменения нескольких классов одновременно.Используя метод toggle, ваш вариант использования может быть таким же тривиальным, как:

document.getElementById("misto1").addEventListener("click", function(e){
    e.target.classList.toggle("flipOver");
    // Where .flipOver is a class that rotates 180deg around the y-axis.
});

Вот пример в действии с использованием вашего кода.Я изменился настолько мало, насколько это возможно, поэтому мне нужно провести приличный объем рефакторинга.