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

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 继承了 .card__side 的 color: #fff。只需添加以下内容即可查看列表项中的文本。

.card__details {
  color: #111;
}

顺便说一下，不错的设计和 CSS 代码，但如果您想考虑性能，请不要使用 transition: all。