360 degrees+optimized card flip

<!--this is complicated to install on carrd, my bad
container class: card // side classes: cardface cardfront & cardface cardback-->

<!-- NUMBER #1 EMBED: HIDDEN, HEAD -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<!-- NUMBER #2 EMBED: HIDDEN, BODY TOP -->
<style> body { font-family: sans-serif;}

#main {
width: 15em;
height: 15em;

perspective: 600px;
transform:scale(1.2, 1.2) translateY(3.5em);
}

.card {
width: 100%;
height: 100%;

transform-style: preserve-3d;
cursor: pointer;
position: relative;
}

.cardface {
border-radius:5px;
top:-3em;
position: absolute;
width: 100%;
height: 100%;
line-height: 15em;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.cardfront {

}

.cardback {

width:15em;
height:15em;
border:3px black double;
padding:0.5em 0.5em 0.5em 0.5em;
background-color:white;
position:relative;
top:-0em;
transform: translateY(-6.75em) translateZ(-1px) rotateY(180deg);
}</style>

<!-- NUMBER #3 EMBED: HIDDEN, BODY END -->

<script>
$(document).ready(function () {
$(".card").addClass("blue");
});

var hasBeenClicked = false;
jQuery('a').click(function () {
hasBeenClicked = true;
});

$(".card").click(function () {
var $this = $(".card");

if (hasBeenClicked) {
hasBeenClicked = false;
}
else if ($this.hasClass("blue")) {
$this.css("transform", "rotateY(180deg)");
$this.css("transition", "1s")
$this.removeClass("blue");
$this.addClass("red");
} else {
$this.css("transform", "rotateY(360deg)");
$this.css("transition", "1s")

$this.removeClass("red");
$this.addClass("blue");
}
});

const transition = document.querySelector(".card");
transition.ontransitionend = () => {
if ($('.card').hasClass("blue")) {
$('.card').css("transform", "rotateY(0deg)");
$('.card').css("transition", "none");
}
};</script>


<!-- have fun smile -->