引导翻转动画高度2px

Question

我试图在我的网站上做一个翻盖卡，但每次我使元素的默认高度为2或1 px。我相信这与使两个元素的位置是绝对的有关，但这是我看到的唯一的方法来做到这一点，而不破坏我的页面布局。我使用的是引导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="yourname@domain.com" 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

解决方案是将!important应用于ended属性，并且在引导属性强制绝对元素在高度中仅为2px之前就已被识别。

Answer 2

我在你的卡上设置了一个悬停，它看起来是有效的。

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