How can I make the element flip when clicked again?

Question

css

Such a question, there is a block that flips on hover (on a PC), on a mobile device it flips when clicked.
But the problem is that it only flips in one direction.
How to make an element flip when clicked both in one direction and in the other direction.
Example: fitness.ad-rocket.com.ua/our-trainers
Here is the code for this element

<div class="ourtrainers">
<div class="flip-container">
    <div class="flipper">
        <div class="front">
         <div class="box1">
        <div class="trener-img ourtrainers-img"><img  src="' . $image_url . '"></div>
        <div class="ourtrainers-title">' . $title . '</div>
             <div class="vc-infobox-texttitle ourtrainers-text">' . $texttitle . '</div>
             <div class="vc-infobox-texttitle">' . $experience . '</div>
             <div class="vc-infobox-texttitle">' . $workexperience . '</div></div>
            
        </div>
        <div class="back">
         <div class="box2">
             <div class="ourtrainers-text-back">' . $text . '</div></div>
        </div>
    </div>
</div>

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;

}

.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-container, .front, .back {
  width: 100%;
  height: 648px;
}

.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
}

.front {
  z-index: 2;
}

.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);

  background: #f8f8f8;
}

.front .name {
  font-size: 2em;
  display: inline-block;
  background: rgba(33, 33, 33, 0.9);
  color: #f8f8f8;
  font-family: Courier;
  border-radius: 5px;
  bottom: 60px;
  left: 5%;
  position: absolute;
  text-shadow: 0.1em 0.1em 0.05em #333;
}

.back-logo {
  position: absolute;
  top: 40px;
  left: 90px;
  width: 160px;
  height: 117px;
}

.back-title {
  font-weight: bold;
  color: #00304a;
  position: absolute;
  top: 180px;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0.1em 0.1em 0.05em #acd7e5;
  font-family: Courier;
  font-size: 2em;
}

.back p {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 20px;
  font-family: arial;
  line-height: 2em;
}

Answer 1

Alternatively, using JS, add an onmouseout and touchend event handler that changes the class of the div element with the flipper class. Alternately, when the mouse leaves the block or the touch stops, its state changes from class="flipper right-rotate" to "flipper left-rotate" and back.
Accordingly, rotations will be indicated by two different rules, for each "trigger" state:
.flip-container.hover .flipper.right-rotate {}
.flip-container.hover .flipper.left-rotate {
} but it is within the competence of Sass technology, alas, I can’t suggest an implementation, but I’m sure that such metamorphoses with remembering the states of objects are in the order of things there.