持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第23天，点击查看活动详情

今天来做一个卡牌选择的立体效果，只不过添加的颜色形成的结果就像咸蛋黄一样，所以就叫咸蛋卡牌了。

咸蛋卡牌

一个看到就想吃咸蛋黄的卡牌。

结构

准备展示五张卡牌，如下：

<div class="container">
    <span>点</span>
    <span>兵</span>
    <span>点</span>
    <span>将</span>
    <span>台</span>
</div>

样式

首先，我们要把container变成3D容器，如下：

.container {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    transform-style: preserve-3d;
}

然后，需要把单个卡牌的样式给做出来，如下：

.container span {
    display: inline-block;
    width: 10rem;
    height: 15rem;
    border-radius: 1rem;
    box-shadow: 0 0 1rem cyan inset;
    cursor: pointer;
    text-align: center;
    line-height: 15rem;
    color: #fff;
    font-size: 2rem;
}

最后呢，需要给卡牌一个hover效果，但是这个效果我们需要考虑很多：

1. 第一，要给container一个hover效果，使其子级节点（指卡牌）发生变化。

.container:hover span {
    transform: perspective(50rem) rotateY(30deg);
}

2. 第二，当鼠标放在当前卡牌上的时候，要给当前卡牌一个效果。

.container span:hover {
    transform: perspective(50rem) rotateY(0deg);
    background: radial-gradient(transparent, gold, rgb(255, 102, 0));
    box-shadow: 0 0 1rem #fff,
        0 0 2rem #fff;
}

3. 第三，当鼠标放在当前卡牌上的时候，要给其后面所有的兄弟节点一个效果。

.container span:hover~span {
    transform: perspective(50rem) rotateY(-30deg);
}

效果

效果及其代码详情，如下：

总结

在做这个效果的时候，我们需要注意两点问题：

1. 给每个元素transform中添加perspective，是为了以当前元素为视觉观察点，这样会让每个元素的变化看着是一样的。

2. 这里我们使用到了兄弟选择，所以对兄弟选择器再展开一下。+表示当前元素后的相邻兄弟元素，仅仅只有一个；～表示当前元素后的所有兄弟元素，可以有很多个。