is there a way to flip only the flipcard and not the text containing in the flipcard-CodePudding

The problem I have is whenever I flip the card(by hovering on the card) the text containing in the flipcard(Yellow or Red) depending on the flipcard you hover gets mirrored, how should I code to avoid text mirroring? I am new , please help as I am new to HTML concepts

img {
  width:200px;
  height:200px;

} 

.flip-card {

  display:inline-block;

  width: 200px;
  height: 200px;
  border: 5px solid #555;
  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: absolute:
  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);
}

.centrd {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
    font-weight: bold;

}
/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


/* Style the back side */
.flip-card-back {
  background-color: lightgrey;
  color: red;
    transform: rotateY(180deg);
}

<div > 
  <div ><div >Yellow</div><img src="yellow.png">  
  </div>
</div>

CodePudding user response：

I have an idea, let's rotate the text in reverse to the card. Wonder if it'll work. Caveat: You will have to center the centrd element without transform because you can't have 2 transforms.

Edit: however when combined with image the effect fails. Might as well position absolute the centrd word which is a more natural solution to keep the word out of the flow of the card.

img {
  width: 200px;
  height: 200px;
}

.flip-card {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 5px solid #555;
  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: absolute: 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);
}

.flip-card:hover .centrd {
  transform: rotateY(-180deg);
}

.flip-card .centrd {
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.centrd {
  position: absolute;
  width: 100%;
  top: 50%;
  text-align: center;
  font-weight: bold;
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


/* Style the back side */

.flip-card-back {
  background-color: lightgrey;
  color: red;
  transform: rotateY(180deg);
}

<div >
  <div >
    <div >Yellow</div><img src="yellow.png">
  </div>
</div>