I am making a website to convert text to notecards, and I am struggling with the animation. Whatever I do, the 3d animation seems to mess up the text, mirroring it. I’ve tried playing with the css, but I’m new to web dev and this is a lot.
Here is the repository: https://github.com/Subwaey/Notes2Cards
An image: 
Simplified code:
function flipAll() {
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', () => {
card.classList.toggle('flipped');
});
});
}
const flashcards = document.getElementById("flashcards");
flashcards.innerHTML = "";
var terms = ["a", "b", "c"];
var definitions = ["aa", "bb", "cc"];
for (let i = 0; i < terms.length; i++) {
const card = document.createElement("div");
card.classList.add("card");
const cardInner = document.createElement("div");
cardInner.classList.add("card-inner");
card.appendChild(cardInner);
const cardFront = document.createElement("div");
cardFront.classList.add("card-front");
cardFront.innerHTML = `<h2>${terms[i]}</h2>`;
cardInner.appendChild(cardFront);
const cardBack = document.createElement("div");
cardBack.classList.add("card-back");
cardBack.innerHTML = `<p>${definitions[i]}</p>`;
cardInner.appendChild(cardBack);
card.addEventListener("click", function() {
card.classList.toggle("flipped");
});
flashcards.appendChild(card);
}.card {
width: 400px;
height: 250px;
background-color: #252525;
border-radius: 10px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
margin: 50px auto;
position: relative;
}
.card:hover {
transform: scale(1.05);
background-color: #2e2e2e;
}
.card .card-inner {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.3s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.card .card-front,
.card .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card .card-front {
transform: rotateY(0deg);
}
.card .card-back {
transform: rotateY(180deg);
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
.card.flipped .card-front {
transform: rotateY(0deg);
}<div class="grid" id="flashcards"></div>>Solution :
If you transform the content inside you can make it flip it the right way
.card .card-back p {
transform: rotateY(180deg);
}
function flipAll() {
const cards = document.querySelectorAll('.card');
cards.forEach(card => {
card.addEventListener('click', () => {
card.classList.toggle('flipped');
});
});
}
const flashcards = document.getElementById("flashcards");
flashcards.innerHTML = "";
var terms = ["a", "b", "c"];
var definitions = ["aa", "bb", "cc"];
for (let i = 0; i < terms.length; i++) {
const card = document.createElement("div");
card.classList.add("card");
const cardInner = document.createElement("div");
cardInner.classList.add("card-inner");
card.appendChild(cardInner);
const cardFront = document.createElement("div");
cardFront.classList.add("card-front");
cardFront.innerHTML = `<h2>${terms[i]}</h2>`;
cardInner.appendChild(cardFront);
const cardBack = document.createElement("div");
cardBack.classList.add("card-back");
cardBack.innerHTML = `<p>${definitions[i]}</p>`;
cardInner.appendChild(cardBack);
card.addEventListener("click", function() {
card.classList.toggle("flipped");
});
flashcards.appendChild(card);
}.card {
width: 400px;
height: 250px;
background-color: #252525;
border-radius: 10px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
margin: 50px auto;
position: relative;
}
.card:hover {
transform: scale(1.05);
background-color: #2e2e2e;
}
.card .card-inner {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.3s;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.card .card-front,
.card .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card .card-front {
transform: rotateY(0deg);
}
.card .card-back {
transform: rotateY(180deg);
}
.card .card-back p {
transform: rotateY(180deg);
}
.card.flipped .card-inner {
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
.card.flipped .card-front {
transform: rotateY(0deg);
}<div class="grid" id="flashcards"></div>