text yang didalam css button arahnya terbalik jika di hover

Jadi saya mencoba-coba untuk membuat css box dan di dalam css box nya ada button, jika buttonnya di hover maka akan seperti ini : gambar

nah masalahnya adalah arah textnya terbalik, bukannya dari kiri ke kanan ini malah dari kanan ke kiri dan juga text nya terbalik

ini adalah contoh html code nya:

<div>
  <a href="LO.css">
     <h5 class="btn">BUY NOW</h5>
  </a>
</div>

dan ini css nya :

.btn {
    text-align: center;
    border: 5px solid cyan;
    border-radius: 20px;
    background-color: cyan;
    display: inline-block;
    padding: 20px;
    color: white;
    transition: .55s;
}

.btn a{
    text-decoration: none;
}

.btn:hover {
    border: 5px solid cyan;
    background-color: transparent;
    color: cyan;
    transform: rotateY(180deg);
}

kira-kira apa yang harus saya tambahkan ya? dan juga saya kira ini terjadi karena sifat dari rotateY(180deg)

ini code link pennya: https://codepen.io/aldhaneka/pen/ZEQRRXP