css变换旋转闪烁/不工作

我遇到了这个问题，我试图在悬停时旋转这个div，但当我悬停时，它尝试悬停，但它会回到正常位置。你能帮忙吗？ 这是我的小提琴：

---

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

。部分教程{
背景颜色：粉红色；
填充：5rem 0 50rem 0；
}
.居中文本{
背景颜色：蓝色；
填充：30px0；
}
氢{
填充：0；
保证金：0；
}
.第1列，共3列{
宽度：计算（（100%-20px）/3）；
透视图：1000px；
}
.卡片{
背景颜色：橙色；
高度：15雷姆；
过渡期：全部8秒；
}
.第1列，共3列：悬停卡{
变换：旋转（180度）；
}

最受欢迎的旅游
正文

谢谢你的回答，为什么文本没有向后显示？

.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); 
}