css transform rotate flickering/not working

Question

I ran into this issue where I am trying to rotate this div on hover, but when I hover, it tries to hover but then it goes back to the normal position. could you please help? here is my fiddle: 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

Apply the hover to a parent element and also move the perspective declaration to the parent:

.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>