我是編碼新手，需要幫助解決問題。我在下面添加了我的HTML，CSS和JS文件。我的目標是建立一個網站，當用戶從棕色部分向下滾動到橙色部分時，我希望卡片從前到后旋轉，暫停兩秒鐘(我也需要暫停的代碼)，然后再從后到前旋轉(回到開始位置)。

如你所見，在我的JavaScript文件中，卡片從正面翻到背面，但我不知道如何編碼才能讓它再次從背面翻到正面。有人能幫忙嗎？提前感謝。

const observer = new IntersectionObserver(
  entries => {
    entries.forEach(entry => {
      if (entry.intersectionRatio >= 1) {
        entry.target.classList.add('fliped')
      } else {
        entry.target.classList.remove('fliped')
      }











    })
  }, {
    threshold: [1]
  },
)

const cards = document.querySelectorAll('.flip-card')

cards.forEach(card => {
  observer.observe(card)
})

* {
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
}

.one {
  background-color: brown;
  display: flex;
  justify-content: center;
  align-items: center;
}

.two {
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card {
  width: 300px;
  height: 300px;
  perspective: 1000px;
  margin-bottom: 50px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

.flip-card-front {
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card-back {
  background-color: red;
  color: white;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  -webkit-transform: translateZ(90px) scale(0.91);
  transform: translateZ(90px) scale(0.91);
}

.fliped .flip-card-inner {
  transform: rotateY(180deg);
}

<section class="one">

</section>

<section class="two">

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <h1>Font</h1>
      </div>
      <div class="flip-card-back">
        <div class="content">
          <h1>Back</h1>
        </div>
      </div>
    </div>
  </div>

</section>

這可以通過使用setTimout函數很容易地完成，該函數在2000毫秒后刪除該類，見下面的例子。

const observer = new IntersectionObserver(
  entries => {
    entries.forEach(entry => {
      if (entry.intersectionRatio >= 1) {
        entry.target.classList.add('fliped');
        setTimeout(() => { // setTimeout
          entry.target.classList.remove('fliped') // to remove class
        }, 2000) // after 2000ms
      } else {
        entry.target.classList.remove('fliped')
      }
    })
  }, {
    threshold: [1]
  }, )

const cards = document.querySelectorAll('.flip-card')

cards.forEach(card => {
  observer.observe(card)
})

* {
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
}

.one {
  background-color: brown;
  display: flex;
  justify-content: center;
  align-items: center;
}

.two {
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card {
  width: 300px;
  height: 300px;
  perspective: 1000px;
  margin-bottom: 50px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

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

.flip-card-front {
  background-color: blue;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card-back {
  background-color: red;
  color: white;
  transform: rotateY(180deg);
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  -webkit-transform: translateZ(90px) scale(0.91);
  transform: translateZ(90px) scale(0.91);
}

.fliped .flip-card-inner {
  transform: rotateY(180deg);
}

<section class="one">

</section>

<section class="two">

  <div class="flip-card">
    <div class="flip-card-inner">
      <div class="flip-card-front">
        <h1>Front</h1>
      </div>
      <div class="flip-card-back">
        <div class="content">
          <h1>Back</h1>
        </div>
      </div>
    </div>
  </div>

</section>