css animation flip without back flip - css

Question

I want to rotate my element repeatedly, without back flip. When I call my function first time it will rotateX('180deg'), and the second will be rotateX('360deg') but the problem when I call third time it will be backflip, so any idea to make this flip keeping forward without back flip?
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

Simplify DOM, simplify JS and optimize CSS.
This is the best way to make a spinning card:
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

You can do something like this:
$('#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>