手把手教你：如何打造一张3D翻转卡片

前言

  不知道大家伙有没有在浏览网页的时候看见过类似于翻转卡片的效果。这种效果是不是很抓人眼球，是不是很想把它制作出来。

  乍眼一看很炫酷很神奇，其实实现起来也并不是很难，只需要你会一些CSS就行。接下来我来手把手教你完成这种炫酷的效果。

代码块展示

手把手教你实现

基础的html部分，添加卡片card盒子。

  <div class="card">
        <div class="face front">
            <h2>CSS</h2>
        </div>
        <div class="face back">
            <h2>HTML</h2>
        </div>
    </div>

对card盒子设置transform-style: preserve-3d，使card的子级元素具有3d属性，并设置高度和宽度以及相对定位。

.card{
    position: relative;
    width: 300px;
    height: 400px;
    transform-style: preserve-3d;
}

然后对card盒子的子级元素设置过渡属性，以及通过flex布局来设置水平垂直居中效果。水平垂直居中使用频率极高，除了flex布局，还有其他方式可以达到水平垂直居中效果，所以大家可以多看看这类效果。

{
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 1s ease-in-out;
    backface-visibility: hidden;
    transform: perspective(500px) rotateY(0deg);
  }   

这里要引入两个新属性，分别是backface-visibility: hidden和transform: perspective(500px) rotateY(0deg)。backface-visibility属性定义当元素不面向屏幕时是否可见，当值设置为hidden则表示背面是不可见的。transform可控制css元素的位移及旋转状态，可单独使用，也可与perspective透视一起使用。perspective的中文意思是透视、视角，定义3d元素距视图的距离。

最后给文字设置不同的颜色、效果等，相关代码如下所示：

.card .face.front{
    background: yellow;
    color: white;
}
.card .face.back{
    background: skyblue;
    color: yellow;
    transform: perspective(500px) rotateY(180deg);
}
.card .face h2{
    font-size: 4em;
    transform: perspective(500px) translateZ(50px);
}

并加入hover选择器（hover选择器已经用过很多次了，这里就不多陈述了），使得当鼠标移动到卡片所在位置时可以产生相应变化（比如旋转以及字体颜色的变化）。相关代码如下所示：

.card:hover .face.front{
    transform: perspective(500px) rotateY(180deg);
}
.card:hover .face.back{
    transform: perspective(500px) rotateY(360deg);
}

结语

  以上就是整个3D翻转卡片的实现思路及过程，是不是还挺简单的，简单的话就去多试试吧，或许通过多尝试还能产生更多新的翻转卡片。