css卡片翻转

正常显示

鼠标悬浮

1. 定义一个卡片div容器，设置相对定位和一些基础样式

<div class="card"></div>
.card {
        position: relative;
        width: 400px;
        height: 100px;
        text-align: center;
        line-height: 100px;
       }

2.往卡片容器中放入两个盒子，一个前面，一个背面。

<div class="card">
     <div class="front">前面内容</div>
     <div class="back">后面内容</div>
</div>
.front,
    .back {
        // 两个盒子都设置绝对定位，重叠在一起
        position: absolute;
        width: 100%;
        height: 100%;
        color: #fff;
        border-radius: 10px;
        // 关键属性，让元素翻转时背面隐藏
        backface-visibility: hidden;
        transition: all 1s ease;
    }
 
    .front {
        background-color: brown;
    }
 
    .back {
        background-color: darkcyan;
        // 让背面一开始就翻转，配合上面隐藏背面的属性就只会显示前面的内容
        transform: rotateY(180deg);
        }

3. 给容器添加动画效果（完整代码）