css3 flip card di chrome lancar di firefox kok gini ya?

dikelas https://sekolahkoding.com/kelas/belajar-css3/video/membuat-kartu-part2 nyoba pake chrome "belajar" bisa terhidden ketika hover, tapi pake firefox kok belajarnya gak mau ke hidden udah nyoba clear cache gak ngaruh juga

kodenya

<!DOCTYPE html>
<html lang="eng">
  <head>
    <meta charset="UTF-8">
    <title>Belajar css 3</title>
    <style>

      body{
        margin-bottom: 500px;
        margin-left: 50px;
        font-size: 20px;
        color: white;
      }

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

      #front, #back{
        position: absolute;
        top: 0px;
        left: 0px;
        height: 200px; width: 200px;
        backface-visibility: hidden;
      }

      #back{
        transform: rotateY(180deg);
      }

      #card:hover{
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>

    <h1> Flip Card </h1>
    <div id="box">
        <div id="card">
          <div id="front"> Belajar </div>
          <div id="back"> CSS 3 </div>
        </div>
    </div>

  </body>
</html>
avatar yudistirasd
@yudistirasd

42 Kontribusi 11 Poin

Dipost 7 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban