After applying a CSS flip animation to a card, the backside isn't visible once flipped. Here is the HTML code for the card component named "ptree-card":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Rest of the head content -->
</head>
<body>
<div class="list">
<div class="col-sm-6 col-xs-12 ptree-card-item">
<div class="ptree-card">
<div class="ptree-card-front" style="background: rgb(164, 230, 173)">
<div class="ptree-card-heading" style="color: rgb(7, 175, 62);">FRONT SIDE</div>
<div class="pskill-btn-group ptree-btn-group">
<button class="ptree-btn ptree-view" onclick="flipSkillCard(this);" style="border: 2px solid rgb(7, 175, 62);">FLIP</button>
</div>
</div>
<div class="ptree-card-back" style="background: red">
<div class="ptree-card-heading" style="color: rgb(7, 175, 62);">BACK SIDE</div>
<div class="ptree-back text-center" onclick="flipSkillCardBack(this);">
<a class="fa fa-chevron-left"></a>FLIP
</div>
</div>
</div>
</div>
</div>
<!-- Rest of the body content -->
</body>
<script>
// JavaScript functions for flipping the card
</script>
In regards to the CSS issue, below are the styles defined in the test.css file:
.ptree-card-item{
/* CSS styles */
}
/* Rest of the CSS styles */
Seems like there might be an issue with the 'backface-visibility'. Have you checked that property?