Question

我在使用三张可翻转的悬停卡时遇到了麻烦。卡片似乎完成了大部分工作，但是，li的内容似乎在刷新后消失/淡出，并加载了页面，即使li的边框并未在正面消失卡本身。卡的标题始终保持可见。

当您尝试（重新）加载页面时，问题非常明显。每次刷新页面时，您都可以清楚地看到该页面的内容在卡的正面消失。卡片的背景图片和标题保持不变

我认为卡本身的过渡会丢失内容。

我几乎尝试了有关变换和过渡的每个属性。至少我认为这与转换或过渡有关，因为您会看到内容在刷新页面时逐渐消失。奇怪的是，标题和卡中的背景图像保持不变并能正常工作。

这是我的Codepen，因此更容易发现问题： https://codepen.io/MaxVervaeke/pen/LvjzVO

HTML

            <div class="tour-card">
                <div class="card__side card__side--front">
                    <div class="card__picture picture-one">&nbsp;</div>
                    <h4 class="card__heading">
                        <span class="card__heading--span card__heading--span-one">The sea <br> explorer</span>
                    </h4>
                    <div class="card__details">
                        <ul>
                            <li>3 day tours</li>
                            <li>Up to 20 people</li>
                            <li>2 tour guides</li>
                            <li>Sleep in cozy hotels</li>
                            <li>Difficulty: very easy</li>
                        </ul>
                    </div>
                </div>
                <div class="card__side card__side--back card__side--back-one">
                    BACKSIDE
                </div>
            </div>

            <div class="tour-card">
                <div class="card__side card__side--front">
                    <div class="card__picture picture-two">&nbsp;</div>
                    <h4 class="card__heading">
                        <span class="card__heading--span card__heading--span-two">The forest <br> hiker</span>
                    </h4>
                    <div class="card__details">
                        <ul>
                            <li>5 day tours</li>
                            <li>Up to 10 people</li>
                            <li>6 tour guides</li>
                            <li>Sleep in snuggy hotels</li>
                            <li>Difficulty: medium</li>
                        </ul>
                    </div>
                </div>
                <div class="card__side card__side--back card__side--back-two">
                    BACKSIDE
                </div>
            </div>

            <div class="tour-card">
                <div class="card__side card__side--front">
                        <div class="card__picture picture-three">&nbsp;</div>
                        <h4 class="card__heading">
                            <span class="card__heading--span card__heading--span-three">The snow <br> adventurer</span>
                        </h4>
                        <div class="card__details">
                            <ul>
                                <li>7 day tours</li>
                                <li>Up to 5 people</li>
                                <li>3 tour guides</li>
                                <li>Sleep in provided hotels</li>
                                <li>Difficulty: hard</li>
                            </ul>
                        </div>
                </div>
                <div class="card__side card__side--back card__side--back-three">
                    BACKSIDE
                </div>
            </div>

CSS

.tour-grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2rem;
padding: 0 5rem;}

.tour-card {
position: relative;
height:700px;
-webkit-perspective: 90rem;
perspective: 90rem;
width:100%;
}

.card__side {
color: #fff;
font-size:1.5rem;
height:700px;
border-radius: 3px;
box-shadow: 0 1rem 2rem rgba(0,0,0,.15);
transition: all 1s ease;
overflow:hidden;
backface-visibility: hidden; 
}


.tour-card:hover .card__side--front {
transform: rotateY(-180deg);
}

.tour-card:hover .card__side--back {
transform: rotateY(0deg);
}


.card__side--front{
background-color: #FFF;
position:relative;
}

.card__picture {
height:15rem;
background-blend-mode: screen;
-webkit-clip-path:polygon(0 0, 100% 0, 100% 85%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
background-size: cover;
}

.picture-one {
background-image: linear-gradient(to right bottom,rgba(255,185,0,1.000),rgba(255,119,48,1.000)), url(../images/trees-sm.jpg);
}

.picture-two {
background-image: linear-gradient(to right bottom,rgba(126,213,11,.7),rgba(40,180,131,.7)),url(../images/lake-bench-sm.jpg);
}

.picture-three {
background-image: linear-gradient(to right bottom,rgba(41,152,255,1.000),rgba(85,67,250,1.000)),url(../images/snowy-route-sm_640.jpg);}


.card__heading {
font-size: 1.5rem;
font-weight:300;
text-transform: uppercase;
text-align: right;
color:#FFF;
position: absolute;
top:30%;
left:60%;
}

.card__heading--span{
padding: .6rem 1rem;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

.card__heading--span-one{background-image: linear-gradient(to right bottom, rgba(255,185,0,.85),rgba(255,119,48,.85))}
.card__heading--span-two{background-image: linear-gradient(to right bottom,rgba(126,213,11,.85),rgba(40,180,131,.85));}
.card__heading--span-three{background-image:linear-gradient(to right bottom,rgba(41,152,255,.85),rgba(85,67,250,.85));}


.card__details ul {
list-style: none;
width:80%;
margin: 0 auto;
}
.card__details ul li {
text-align:center;
font-size: .8rem;
margin: 4rem 0 1rem 0;
border-bottom: 1px solid #777;
}

.card__side--back{
    transform: rotateY(180deg);
    position: absolute;
    top:0;
    left:0;
    width:100%;
}

预期结果：我的li标记之间的内容可以在页面的字体侧看到，而现在它在刷新页面后消失/消失了

Answer 1

也许我没有遇到问题，但是li继承了color: #fff的{{1}}。只需添加以下内容，即可在列表项中看到文本。

.card__side

顺便说一下，不错的设计和CSS代码，但是如果您想考虑性能，请不要使用.card__details { color: #111; }。

悬停时触发可翻转卡的问题

1 个答案: