css变换旋转闪烁/不工作

Question

我遇到了这个问题，我试图在悬停时旋转这个 div，但是当我悬停时，它尝试悬停，但随后又回到正常位置。能否请你帮忙？ 这是我的小提琴：https://jsfiddle.net/Lcb7okfn/

.section-tours{
  background-color:pink;
  padding:5rem 0 50rem 0;

}
.center-text{
  background-color:blue;
  padding:30px 0;

}

.col-1-of-3{
  width: calc((100%-20px)/3);

  }

.card{
  background-color: orange;
  height:15rem;
  transition: all .8s;
  perspective: 1000px;
  -moz-perspective: 1000px;
}
    .card:hover{
      transform: rotateY(180deg); 
}

Answer 1

将悬停应用到父元素，并将透视声明移动到父元素：

.section-tours {
  background-color: pink;
  padding: 5rem 0 50rem 0;
}

.center-text {
  background-color: blue;
  padding: 30px 0;
}

h2 {
  padding: 0;
  margin: 0;
}

.col-1-of-3 {
  width: calc((100%-20px)/3);
  perspective: 1000px;
}

.card {
  background-color: orange;
  height: 15rem;
  transition: all .8s;
}

.col-1-of-3:hover .card {
  transform: rotateY(180deg);
}

<section class="section-tours">
  <div class="center-text">
    <h2>
      Most popular tours
    </h2>
  </div>
  <div class="row">
    <div class="col-1-of-3">
      <div class="card">
        <div class="card class_side">
          TEXT
        </div>

      </div>
    </div>
    <div class="col-1-of-3">

    </div>
    <div class="col-1-of-3">

    </div>
  </div>
</section>