CSS

css flip text

transform: scaleX(-1);

flip something css

<div class="flip">
  <div class="flip-content">
    <div class="flip-front">
      <img src="https://www.fillmurray.com/150/150" />
    </div>
    <div class="flip-back">
      <strong>BILL MURRAY</strong>
    </div>
  </div>
</div>

.flip {
    width: 100%;
    }
    .flip-content {
    transition: transform 0.4s;
    transform-style: preserve-3d;
    }
    .flip:hover .flip-content {
    transform: rotateY(180deg);
    transition: transform 0.3s;
    }
    .flip-front, .flip-back {
    backface-visibility: hidden;  
    }
    .flip-back {
    transform: rotateY(180deg);
    }