我正在尝试使用CSS制作像这样的3D翻转卡片效果。
问题在于卡片没有翻转,而是像这样从背面弹到正面:
不同之处在于,我希望仅使用CSS来实现它。
以下是我尝试过的代码:
/*** LESS: ***/
.card-container {
position: relative;
height: 12rem;
width: 9rem;
perspective: 30rem;
.card {
position: absolute;
width: 100%;
height: 100%;
div {
position: absolute;
height: 100%;
width: 100%;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
backface-visibility: hidden;
transition: transform 1s;
&:hover {
transform: rotateY(180deg);
}
}
}
}
HTML:
<div class="card-container">
<div class="card">
<div class="front"><span>Front</span></div>
<div class="back"><span>Back</span></div>
</div>
</div>
是否可能仅使用 CSS 实现这种悬停时的 3D 卡片翻转效果?