Css 引导翻转动画高度2px

我试图在我的网站上制作一张翻转卡片，但每次我制作的元素的默认高度为2或1像素。我相信这与使几个元素的位置绝对化有关，但这是我见过的唯一一种在不破坏页面布局的情况下做到这一点的方法。我正在使用引导CSS和一些自定义CSS和JS。以下是我的代码： HTML:

---

任何帮助都将不胜感激。也许有解决办法？如果我删除“position:absolute”（位置：绝对），它会正确显示，动画也会以某种方式工作，但该部分被引入页面流中，并且布局无法按我希望的方式工作。

我在您的卡上设置了一个悬停，它似乎可以工作

.card:hover {
    transform: rotateY(180deg);
}

---

最终的解决方案是应用

！重要信息

到height属性，在任何引导属性强制绝对元素的高度仅为2px之前，它被识别出来。

我需要它在单击时翻转，并使用JS处理它。动画效果很好，但为了获得任何高度，我必须删除绝对位置，这使得前后堆栈在页面流中占据相同的空间。我需要一个绝对位置的解决方法。我尝试显式定义高度，但没有任何效果，因此引导会影响容器。是否尝试将“场景”类移动到末尾？col-md-4 d-inline-block h-50场景——对元素高度进行排序或设置内联样式。如果不在此处设置引导程序或示例页面，则很难判断。添加一个！重要的是对身高有什么影响？那没有任何明显的影响。但是，当我申请的时候！对于宽度很重要，它起作用了。非常感谢。

/* form animation */

.scene {
    width: 33.3333333%;
    height: 300px;
    perspective: 1000px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
}

.front {
    background: #98b98a;
}

.back {
    background: #4c87a9;
    transform: rotateY(180deg);
}

.card.is-flipped {
    transform: rotateY(180deg);
}

/* End animation */

.card:hover {
    transform: rotateY(180deg);
}