I'm facing a roadblock in my journey to create a card game. The issue arises at the final stage of the Translate function implementation. In this game, the player is dealt 30 cards (I've simplified it to four for ease of programming), and upon clicking on a card, it should perform an animation using translate and rotate to reveal its value. However, as I only need to expose the values of three cards, those cards must end up in a specific location where they are clearly visible, even if the user selects consecutive cards.
The challenge lies in ensuring that the revealed card ends up in the div labeled Card1 because my current approach with translate does not take me directly to the endpoint but instead moves based on the starting point. Is there anyone who can guide me on achieving this through translation or suggest alternative methods?
const card = document.querySelectorAll(".card");
const card2 = document.querySelector('.card2');
let fragment = document.querySelector(".solve");
card.forEach((card) => {
card.style.display = 'block';
card.onmousedown = function() {
card.classList.add('animate');
};
});body {
background-color: #100e17;
font-family: sans-serif;
}
.container {
position: absolute;
height: 280px;
width: 1200px;
top: 60px;
left: calc(28% - 300px);
display: flex;
}
.card {
position: relative;
transition: all 1s ease;
transform: perspective(600px);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.card1 {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}
.card2 {
display: flex;
height: 260px;
width: 200px;
background-color: red;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
backface-visibility: hidden;
}
.animate {
position: relative;
transform: perspective(600px) translate(0px, 300px) rotateY(-180deg);
transform-origin: 100% 50%;
transition-property: transform;
transition-duration: 3s;
}
.card .card1,
.animate .card .card2 {
position: absolute;
backface-visibility: hidden;
}
.card .card2 {
transform: rotateY(-180deg);
}
.title {
color: white;
font-weight: 300;
position: absolute;
left: 20px;
top: 15px;
}
.answer {
position: absolute;
height: 260px;
width: 300px;
top: 360px;
left: 250px;
display: flex;
}
label {
color: white;
}
.solve {
display: flex;
height: 260px;
width: 200px;
background-color: #17141d;
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
}<div class="container">
<div class="card">
<div class="card1">
<h3 class="title">Card front 1</h3>
</div>
<div class="card2">
<h3 class="title">Card back 1</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 2</h3>
</div>
<div class="card2">
<h3 class="title">Card back 2</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 3</h3>
</div>
<div class="card2">
<h3 class="title">Card back 3</h3>
</div>
</div>
<div class="card">
<div class="card1">
<h3 class="title">Card front 4</h3>
</div>
<div class="card2">
<h3 class="title">Card back 4</h3>
</div>
</div>
</div>
<div class="answer">
<label for="solve">Card 1</label>
<div class="solve" id="solve"></div>
</div>