Recently, I encountered an issue with a div card that triggers an animation when clicked. The animation involves the card scaling up larger, but the problem arises as its edges get hidden under other cards. To visualize this, take a look at the screenshot here.
To address this issue, I attempted to resolve it by adding z-index to the class applied upon clicking. Surprisingly, this fix worked perfectly on Chrome, FireFox, and Edge, but unfortunately failed on Safari.
@-webkit-keyframes flipAndZoomAnim
{
0% { -webkit-transform: rotateY(0deg) scale(0.5) translateZ(1px) }
20% { -webkit-transform: rotateY(180deg) scale(0.5) translateZ(1px) }
40% { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) }
80% { -webkit-transform: rotateY(180deg) scale(1.0) translateZ(1px) }
100% { -webkit-transform: rotateY(180deg) scale(0.5 ) translateZ(1px) }
}
@keyframes flipAndZoomAnim
{
0% { transform: rotateY(0deg) scale(0.5) translateZ(1px) }
20% { transform: rotateY(180deg) scale(0.5) translateZ(1px) }
40% { transform: rotateY(180deg) scale(1.0) translateZ(1px) }
80% { transform: rotateY(180deg) scale(1.0) translateZ(1px) }
100% { transform: rotateY(180deg) scale(0.5) translateZ(1px) }
}
.flipAndZoom {
z-index: 5;
webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-animation-name: flipAndZoomAnim;
animation-name: flipAndZoomAnim;
}
While searching for solutions online, none of them seemed to involve animations. Suggestions like including translateZ(1px) or translate3d(0,0,0); didn't work for me.
When it comes to structuring the HTML, I have these cards displayed row by row within a div element, where they are dynamically added using JavaScript.
<div id="board">
<div id="card1" class="card">
<figure class="front">
<img src="front.jpg"/>
</figure>
<figure class="back">
<img src="back.jpg"/>
</figure>
</div>
<div id="card2" class="card">
<figure class="front">
<img src="front.jpg"/>
</figure>
<figure class="back">
<img src="back.jpg"/>
</figure>
</div>
</div>
An intriguing observation is how the zoomed-in card consistently gets displayed beneath the other cards without ever appearing on top.
If you want to explore the website featuring these cards, here's the link: