CSS悬停翻转卡片

wj1713520

已于 2022-08-22 18:41:19 修改

阅读量757

点赞数 1

分类专栏： tailwindCSS CSS 文章标签： TailwindCSS CSS动画翻转效果 HTML结构背景渐变

于 2022-08-22 16:11:28 首次发布

本文链接：https://blog.youkuaiyun.com/wj1713520/article/details/126468055

版权

CSS 同时被 2 个专栏收录

11 篇文章

订阅专栏

tailwindCSS

2 篇文章

订阅专栏

本文介绍了如何结合普通CSS和TailwindCSS来创建一个翻转卡片的视觉效果。通过修改from-[]和to-[]的颜色值可以改变卡片背景色，利用CSS的perspective属性和transform规则实现翻转动画。同时，提供了HTML结构和相应的CSS代码示例，并解释了关键代码的作用。此外，还展示了实现效果的截图，并提示需设置html元素的字体大小为62.5%以确保rem单位的正确应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

普通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，所以需要设置根元素字体大小：