I have stack of cards where on click; the cards will change to the next card behind and so on.
I want to achieve two things here:
1. The cards appear to be in the left and overflows to the left div, it does not align in the middle of the parent div, how to I make the cards to be in its own div?
2. Please how do I make the cards to automatically change to the next card behind without clicking on the card to change? And I also want the change animation to swap below when the card changes.
CSS
<style type="text/css">
.flipcard {
position: relative;
height: 100%;
width: 100%;
z-index: 100;
transform-style: preserve-3d;
}
.innercard {
position: absolute;
height: 250px;
width: 100%;
border-radius: 15px;
backdrop-filter: blur(25px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 10px 40px rgba(255, 255, 255, 0.20);
border: 1px solid rgba(255, 255, 255, 0.1);
backface-visibility: hidden;
text-align: center;
font-size: 2rem;
transform: translate(-50%, -50%);
justify-content: center;
align-content: center;
}
.innercard:nth-last-child(n + 3) {
--y: calc(-50% - 25px);
transform: translate(-50%, var(--y)) scale(0.95);
box-shadow: 0 0 1px 1px #00000003;
}
.innercard:nth-last-child(2) {
--y: calc(-50% - 10px);
transform: translate(-50%, var(--y)) scale(1);
}
.innercard:nth-last-child(1) {
--y: calc(-50% + 10px);
transform: translate(-50%, var(--y)) scale(1.05);
}
@keyframes swap {
50% {
transform: translate(-50%, calc(var(--y) -250px)) scale(0.85) rotate(-5deg);
animation-timing-function: ease-in;
}
100% {
transform: translate(-50%, calc(var(--y) -15px)) scale(0.85);
z-index: -1;
}
}
</style>
HTML
<div class="subbottom" style="background-color: #011b33;">
<br />
<div class="col-sm-11" style="width: 100%; margin: 0 auto; padding: 5px; margin-top: 3%;">
<div class="row" style="margin: 0 auto; width: 100%; margin-top: 2%; margin-bottom: 0%;">
<div class="col-sm-9" style="margin: 0 auto; padding: 6px; color: #ffffff;">
<div style="margin: 0 auto; margin-top: 3%; font-family: 'Mulish', sans-serif; font-weight: 900; font-size: 7.1vmin; line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
<span style="margin: 0 auto;">This is the second Div header</span>
</div>
</div>
<div class="col-sm-3" style="margin: 0 auto; padding: 6px;"></div>
</div>
<div class="row" style="width: 100%; margin: 0 auto;">
<div class="col-sm-5" style="margin: 0 auto; padding: 5px; margin-bottom: 0%;">
<div style="line-height: normal; vertical-align: baseline; letter-spacing: 0px; word-spacing: 0px; text-align: start;">
<h5 style="color: #1bb6f4;">Div Sub Header</h5>
<label style="color: #ffffff; font-size: 15.90px;">This section will contain detailed contents</label>
</div>
</div>
<div class="col-sm-1" style="margin: 0 auto;"></div>
<div class="col-sm-6" style="width: 100%; margin: 0 auto; padding: 5px; margin-bottom: 0%; text-align: center; position: relative;">
<div class="sect">
<div class="flipcard">
<div class="innercard font-face">FRONT CARD 1</div>
<div class="innercard font-face">FRONT CARD 2</div>
<div class="innercard font-face">FRONT CARD 3</div>
</div>
</div>
</div>
<br />
</div>
<br />
</div>
<br />
</div>
JavaScript
<script>
let flipcard = document.querySelector(".flipcard");
[...flipcard.children].reverse().forEach(i => flipcard.append(i));
flipcard.addEventListener("click", swap);
function swap(e) {
let innercard = document.querySelector(".innercard:last-child");
if (e.target !== innercard) return;
innercard.style.animation = "swap 700ms forwards";
setTimeout(() => {
innercard.style.animation = "";
flipcard.prepend(innercard);
}, 700);
}
</script>
