css-卡片反转效果

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第30天，点击查看活动详情

今天使用html+css来制作一个翻拍效果，就像一张扑克翻开后又盖上，要实现这个效果有四个关键部分：

• 1.正面和背面分别使用两个div显示，长度和宽度相同并且完全重叠，所以只需将position属性设为absolute
• 2.运用css的transform属性，用rotate来将卡片旋转
• 3.backface-visibility的设定，用力控制html元素的背面能不能被看见
• 4.perspective的设定，立体效果

html结构就一个大div包裹两个小div，一个正面一个背面

<div class="card-container">
    <div class="cover">
      正面
    </div>
    <div class="back">
      背面
    </div>
</div>

css设定card-container的大小以及将position设为relative，cover和aback的div的position设定为absolute，长宽也是100%，给正面和背面一个背景颜色

.card-container{
    width: 300px;
    height: 400px;
    position: relative;
}

.cover,.back{
    width: 100%;
    height: 100%;
    position: absolute;
    font-size: 40px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cover{
    background-color: rgb(94, 94, 146);
}

.back{
    background-color: rgb(223, 223, 89);
}

为了正确计算它的旋转方向，cover在平常状态下加一个transform: rotateY(0deg);,back在平常状态下加一个transform: rotateY(-180deg);

当我们鼠标hover的时候将派翻转，所以card-container在hover的时候cover会沿着Y方向旋转180度，back由-180度转到0度，这是因为他们要沿着同一方向旋转，如果back也由180转到0那么正面和背面在旋转的过程中就会撞到一起

.card-container:hover .cover{
    transform: rotateY(180deg);
}
.card-container:hover .back{
    transform: rotateY(0deg);
}

再给cover和back设置backface-visibility: hidden;反转到背面时隐藏，正面和背面也是成功切换了

但是没有任何动画效果，可以给cover和back加上一个动画效果transition: transform .25s ease-in-out;，而旋转的过程中十分平面，只需在card-container加上perspective就可以看到立体的透视效果了