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

任何帮助将不胜感激。也许有一个解决方法？它显示正确，如果我删除“position：absolute”，动画也会以某种方式工作，但该部分被引入到页面流中，并且布局不能按照我想要的方式工作。

Answer 1

我在你的卡上设置了一个悬停，它似乎正常工作。

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

Answer 2

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

Bootstrap翻转动画高度2px

2 个答案: