Kenapa tulisan masih terlihat padahal backface visibility sudah hidden ?

jadi barusan liat tutorial gan trus ane coba, tapi kok tulisannya masih terlihat ya ? mohon bantuannya

<style>
#div0{
      position: relative;
      height: 200px;
      width: 200px;
      transition: 4s;
      background: blue;
      border: 2px solid black;
      transform-style: preserve-3d;
    }

    #div0:hover{
      transform: rotateY(180deg);
      background: red;
    }

    #dont, #rebel{
      position: absolute;
      top: 0px;
      left: 0px;
      height: 200px;
      width: 200px;
      backface-visibility: hidden;
    }
    #rebel{
      transform: rotateY(180deg);
    }
      </style>

<div id="div0">
        <div id="dont">Dont click the box</div>
        <div id="rebel">You're a rebel</div>
</div>

terimakasih.