Hi @Donald Symmons
1.Reduce the height and assign a top value to each card.
Hi @1.Reduce the height and assign a top value to each card.
Code:
<style type="text/css">
.flipcard { position: relative; height: 50%; width: 100%; z-index: 100; transform-style: preserve-3d; }
.innercard { position: absolute; width: 100%;height:30px; border-radius: 5px; 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(-1% - 0.01px); transform: translate(-5%, var(--y)) scale(0.95); box-shadow: 0 0 1px 1px #00000003; }
.innercard:nth-last-child(2) { --y: calc(-1% - 0.02px); transform: translate(-5%, var(--y)) scale(1); }
.innercard:nth-last-child(1) { --y: calc(-1% + 0.02px); transform: translate(-5%, 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>
<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" style="top:10px">FRONT CARD 1</div>
<div class="innercard font-face" style="top:20px">FRONT CARD 2</div>
<div class="innercard font-face"style="top:30px">FRONT CARD 3</div>
</div>
</div>
</div>
<br />
</div>
<br />
</div>
<br />
</div>
Output:
2.CSS position: absolute change to position: relative
<style type="text/css">
.flipcard { position: relative; height: 50%; width: 100%; z-index: 100; transform-style: preserve-3d; }
.innercard { position: relative; width: 100%;height:100px; border-radius: 5px; 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(-1% - 0.01px); transform: translate(-5%, var(--y)) scale(0.95); box-shadow: 0 0 1px 1px #00000003; }
.innercard:nth-last-child(2) { --y: calc(-1% - 0.02px); transform: translate(-5%, var(--y)) scale(1); }
.innercard:nth-last-child(1) { --y: calc(-1% + 0.02px); transform: translate(-5%, 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>
<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>
Best regards,
Qi You
If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.