Problems with Progress-bar in Flip card

Question

Hello, friends, how are you ?

I’m having trouble with a Progress bar on a Flip animated card. Apparently, the Progress bar enters right, but with the effect of the mouse on top of the card, when giving the Flip, the Progress bar is from right to left and not from left to right.

I’ve tried to use:

direction: rtl;
direction: ltr;
transform: scaleX(-1);

But nothing is certain. I would like to understand better what is actually happening and the best solution for this little problem.

Excerpt from the code:

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: rgb(83, 83, 83);
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: rgb(19, 48, 77);
    color: rgb(68, 68, 70);
    transform: rotateY(180deg);
  }

<div class="flip-card">
			<div class="flip-card-inner">
			  <div class="flip-card-front">
			  	<h1> HTML </h1>
			  </div>
			  <div class="flip-card-back progress-bar" role="progressbar" aria-valuemax="100" style="width: 90%;">
				<p>90%</p>
			  </div>
			</div>
		  </div>

Answer 1

Add right: 0 in class .flip-card-back. As the back is reversed by 180 degrees, the orientation of the element will be opposite (right to left). Aligning the back to the right with right: 0, there will be a new inversion in the orientation of the element (from left to right).

In the example below I created a little animation to illustrate:

$(function(){
   $(".flip-card").hover(
      function(){
         $(".progress-bar").animate({ width: "100%" }, 1000);
      },
      function(){
         $(".progress-bar").css("width", "10%");
      }
   );
});

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: rgb(83, 83, 83);
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: rgb(19, 48, 77);
    color: rgb(68, 68, 70);
    transform: rotateY(180deg);
    background: red;
    right: 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-card">
			<div class="flip-card-inner">
			  <div class="flip-card-front">
			  	<h1> HTML </h1>
			  </div>
			  <div class="flip-card-back progress-bar" role="progressbar" aria-valuemax="100" style="width: 10%;">
				<p>90%</p>
			  </div>
			</div>
		  </div>