有趣的css - 卡片翻转效果

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是利用 css3 属性 backface-visibility 让卡片翻转的过渡动画效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

整体效果

知识点：
① 伪元素的灵活使用
② transform 过渡属性的使用
③ css3 中 backface-visibility 属性的灵活使用

思路：
利用 ::before 和 ::after 伪元素绘制两个不同的矩形卡片，然后根据鼠标悬浮状态让两个矩形卡片翻转展示。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class="card54"></div>

.card54 矩形卡片主体标签。

css 部分代码

.card54{
  width: 100px;
  height: 46px;
  cursor: pointer;
  box-sizing: border-box;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffffff;
}
.card54::before,.card54::after{
  width: 100px;
  height: 46px;
  border-radius: 9px;
  border: 1px dashed #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  content: '有彩蛋';
  background-color: #36AFCA;
  box-shadow: 0 0 0 4px #36AFCA;
  transition: transform 0.5s ease;
  backface-visibility: hidden;  /* 当元素背面向屏幕时，元素不可见 */
}
.card54::after{
  content: '叫爸爸';
  background-color: #F89C6B;
  box-shadow: 0 0 0 4px #F89C6B;
  transform: rotateY(180deg);
}
.card54:hover::before{
  transform: rotateY(180deg);
}
.card54:hover::after{
  transform: rotateY(0deg);
}

1、先定义卡片 .card54 的大小尺寸，以及其它通用样式。

2、然后利用伪元素 ::before 和 ::after 创建两个矩形卡片，分别定义不同的 content 值；然后利用 css3 属性 backface-visibility ，当元素发生背向屏幕时，元素不可见，这样当两个矩形卡片发生翻转时就只显示正面面对屏幕的了。

3、然后根据伪元素 :hover 状态，来让矩形卡片沿着 Y 轴翻转；再加上 transition 过渡参数，这样一个卡片翻转效果就完成了。

Tips：

css3 中 backface-visibility 属性定义当元素背面向屏幕时是否可见，该属性大部分主流浏览器都已经支持。

backface-visibility 属性值有两个，默认为 visible，定义当元素背向时是可见的；另一个值为 hidden ，定义当元素背向时是不可见的。

如果在旋转元素不希望看到其背面时，该属性很有用。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <title>卡片翻转效果</title>
    </head>
    <body>
        <div class="app">
            <div class="card54"></div>
        </div>
    </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card54{
  width: 100px;
  height: 46px;
  cursor: pointer;
  box-sizing: border-box;
  font-weight: 800;
  letter-spacing: 2px;
  color: #ffffff;
}
.card54::before,.card54::after{
  width: 100px;
  height: 46px;
  border-radius: 9px;
  border: 1px dashed #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  content: '有彩蛋';
  background-color: #36AFCA;
  box-shadow: 0 0 0 4px #36AFCA;
  transition: transform 0.5s ease;
  backface-visibility: hidden;
}
.card54::after{
  content: '叫爸爸';
  background-color: #F89C6B;
  box-shadow: 0 0 0 4px #F89C6B;
  transform: rotateY(180deg);
}
.card54:hover::before{
  transform: rotateY(180deg);
}
.card54:hover::after{
  transform: rotateY(0deg);
}