css анимация сальто без сальто назад

Question

Я хочу вращать свой элемент несколько раз, без переворачивания назад. Когда я вызываю свою функцию в первый раз, она будет rotateX ('180deg'), а второй будет rotateX ('360deg'), но проблема, когда я вызываю третий раз, это будет backflip, поэтому любая идея сделать этот переворот, сохраняя без перевернуть?

function myFunction() {
  if (document.getElementById("front").style.transform == "" || document.getElementById("front").style.transform == "rotateX(0deg)") {
    document.getElementById("front").style.transform = "rotateX(180deg)";
    document.getElementById("back").style.transform = "rotateX(0deg)";
  } else if (document.getElementById("front").style.transform == "rotateX(180deg)") {
    document.getElementById("front").style.transform = "rotateX(360deg)";
    document.getElementById("back").style.transform = "rotateX(180deg)";
  } else {
    document.getElementById("front").style.transform = "";
    document.getElementById("back").style.transform = "rotateX(-180deg)";
  }
}

.flipcard {
  position: relative;
  width: 220px;
  height: 160px;
  perspective: 500px;
}

.flipcard.h .back {
  transform: rotateX(-180deg);
}

.flipcard .front,
.flipcard .back {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #000;
  padding: 10px;
  backface-visibility: hidden;
}

<div class="flipcard h">
  <div class="front" id="front">
    This is the front side
  </div>
  <div class="back" id="back">
    This is the back side
  </div>
</div>
<button onclick="myFunction()">Flip The Image</button>

Answer 1

Упрощение DOM, упрощение JS и оптимизация CSS.

Это лучший способ сделать вращающуюся карту:

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

body { font-family: sans-serif; }

.card {
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

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

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
  background: red;
}

.card__face--back {
  background: blue;
  transform: rotateX(180deg);
}

<div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>

Answer 2

Вы можете сделать что-то вроде этого:

$('#btnClick').click(function() {
  $('.flip-container').toggleClass("flipped");
});

.flip-container.flipped .flipper {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
  position: relative;
}

.flip-container,
.front,
.back {
  width: 200px;
  height: 200px;
}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 500;
  cursor: pointer;
  top: 0;
  width: 200px;
  height: 200px;
}

.flip-container .back {
  transform: rotateX(-180deg);
  background-color: #000;
}

.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;
  width: 200px;
  height: 200px;
  display: block;
}

.flip-container .front,
.flip-container .back {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.6s ease-in;
  color: white;
  background-color: #000;
  padding: 10px;
  backface-visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
  <div class="flipper">
    <div class="front">
      <p>This is the front side </p>
    </div>
    <div class="back">
      <p> This is the back side </p>
    </div>
  </div>
</div>
<button id="btnClick">Flip The Image</button>