引导翻转动画高度 2px

Question

我正在尝试在我的网站上制作翻转卡，但每次我制作元素时，它们默认为 2 或 1 像素的高度。我相信这与使几个元素的位置绝对有关，但这是我看到的唯一方法，可以在不弄乱页面布局的情况下做到这一点。我正在使用Bootstrap CSS和一些自定义CSS和JS，这是我的代码： .HTML：

<div class="scene col-md-4 d-inline-block h-50">
<div class="card">
<div class="face front">
<img src="images/pawprints_edit.png" width="300" height="180" alt="sign up for al-van newsletter" id="news-img" class="d-inline-block col-md-12 img-fluid h-50" />
</div>
<div class="face back">
<form action="form-to-email.php" method="post" name="mail-form" class="mail-form">
<label for="name">Name:</label><br/>
<input type="text" name="name" placeholder="John Doe" required width="25"><br/>
<label for="email">Email Address:</label><br/>
<input type="text" name="email" placeholder="[e-mail]" required width="50">
<label for="message">Please type your message:</label><br/>
<textarea name="message" id="message" cols="30" rows="4">Please sign me up for the Paw Prints Newsletter.</textarea><br/>
<input type="button" value="Submit">
</form>
</div>
</div>
</div>

CSS：

/* 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 */

任何帮助将不胜感激。也许有解决方法？如果我删除"位置：绝对"，它会正确显示并且动画以某种方式工作，但该部分被引入页面流程并且布局没有按照我想要的方式工作。

Answer 1

我在您的卡片上设置了一个悬停，它似乎有效。

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

Answer 2

解决方案最终是将!important应用于高度属性，并且在任何引导属性强制绝对元素的高度仅为 2px 之前就已识别出来。