CSS悬停翻转卡片

普通css与tailwindcss结合，来实现翻转卡片特效。

HTML中的结构代码与tailwind代码：

1.如果需要更改卡片背景色，直接更改from-[ ]  、to-[ ]  方括号中的颜色值即可。

              <div className="rtCard">
                <div className="rt_side rt_side--front bg-gradient-to-br from-[#2998ff] to-[#5643fa]">
                  FRONT
                </div>
                <div className="rt_side rt_side--back bg-gradient-to-br from-[#ffb900] to-[#ff7730]">
                  BACK
                </div>
              </div>

CSS中的代码：

1.对rtCard设置h-[50rem]是为了解决元素使用了定位，高度坍塌的问题。

2.perspective属性是为了增加翻转时候的透视效果。

@layer utilities {
  .rtCard {
    perspective: 150rem;
    @apply relative h-[50rem] text-white font-bold text-[2rem];
  }
  .rt_side {
    @apply h-[50rem] rounded-lg transition-all duration-500 absolute top-0 left-0 w-full ease-out shadow-[0_1.5rem_4rem_rgba(0,0,0,.3)] overflow-hidden;
    backface-visibility: hidden;
  }
  .rt_side--back {
    transform: rotateY(180deg);
  }
  .rtCard:hover .rt_side--front {
    transform: rotateY(-180deg);  // 这里必须为-180deg，如果是180deg看起来会很怪异
  }
  .rtCard:hover .rt_side--back {
    transform: rotateY(0);
  }
}

由于单位是rem，所以需要设置根元素字体大小： 

html {
  font-size: 62.5%;
}

效果如下图：