我正在创建一款类似于流氓的甲板建造游戏.我正在添加一项功能，以制作一张看起来不错，但对您不利的卡片.然而，由于我需要它在每一面显示为不同的稀有物品，这意味着我需要两个边界.
我最初的try 是一个独立的过渡，但它太突然了，既没有褪色，也没有像我想的那样成为双面.我的第二次try 成功了，但在构建时是这样的:
html,
body {
font-family: "Space Mono", monospace;
color: white;
width: 100%;
height: 100%;
}
card {
width: calc(70px * 2);
height: calc(100px * 2);
background: #3b3b3b;
border-radius: 1em;
perspective: 600px;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.cardfront,
.cardback {
backface-visibility: hidden;
position: absolute;
height: 100%;
width: 100%;
}
.evilcardfront {
border-top: 10px solid orange;
border-bottom: 6px solid orange;
}
.evilcardback {
border-top: 10px solid maroon;
border-bottom: 6px solid maroon;
}
.epic {
border-top: 10px solid #9c20aa;
border-bottom: 6px solid #9c20aa;
}
.flipped {
transform: rotateY(180deg);
}
.cardback {
transform: rotateY(180deg);
font-size: medium;
text-align: center;
padding-top: 10px;
}
.common {
border-top: 10px solid slategray;
border-bottom: 6px solid slategray;
}<div style="display: flex;">
<card class='evil' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
<div class='cardfront evilcardfront'></div>
<div class='cardback evilcardback'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card has misplaced borders</span></div>
</card>
<card class='common' onclick='if (!this.classList.contains("flipped")) { this.classList.add("flipped") }'>
<div class='cardfront'></div>
<div class='cardback'><span id='name'>Name</span><br><span id='type' style='color: fuchsia; font-size: small;'>type</span><br><span>this card is correct</span></div>
</card>
</div>