翻转卡背面部分消失

Question

我刚开始在学校学习编码，我想做一个简单的项目。我制作了一张由芬兰国旗和图片组成的翻转卡片。问题是，当我把鼠标悬停在旗帜上时，它翻转了，一半的图片没有显示出来。

.wallpaper {
background: green;
height: 2000px;
width: 1920px;
position: absolute;
}
.flag {
height: 310px;
width: 550px;
background: white;
position: relative;
}
.horizontal {
position: relative;
background: rgba(0, 54, 128, 255);
height: 75px;
top: 40%;
}
.vertical {
position: relative;
top: -75px;
bottom: 0;
left: -75px;
right: 0;
margin: auto;
background: rgba(0, 54, 128, 255);
height: 310px;
width: 75px;
}
.vodka {
height: 200px;
width: 200px;
}
img {
position: relative;
top: 900px;
bottom: 0;
left: 525px;
right: 0;
width: 350px;
height: 250px;
}
.text {
position: absolute;
left: 450px;
top: 100px;
}
.mannen {
color: white;
position: relative;
top: 200px;
left: 75px;
}
.myten {
color: rgba(0, 54, 128, 255);
position: relative;
top: 200px;
left: 200px;
}
.legenden {
color: white;
position: relative;
left: 300px;
top: 200px;
}
.container {
background: rgba(0, 54, 128, 255);
position: fixed;
height: 100px;
width: 1920px;
top: 0;
}
.mikko {
color: white;
position: relative;
left: 800px;
}
.group {
position: relative;
left: 250px;
}
.flip-card {
background: transparent;
width: 550px;
height: 310px;
perspective: 1000px;
position: absolute;
top: 500px;
left: 450px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.image {
position: relative;
top: -900px;
left: 525px;
transform: scale(-1, 1);
z-index: -1;
}

<div class="wallpaper">
<div class="group">
<div class="text">
<h1 style="font-family: Verdana">
<div class="mannen">Mannen,</div>
<div class="myten">myten,</div>
<div class="legenden">legenden!</div>
</h1>
</div>
<div class="vodka">
<img src="https://folkofolk.se/sites/default/files/styles/article_large/public/2016-02/Finlandia_0.jpg.jpeg?itok=2vkru5VU" />
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flag">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
<div="flip-card-back">
<div class="image">
<img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mikko">
<h1 style="font-family: Verdana">Mikko Tähtinen</h1>
</div>
</div>
</div>

Answer 1

删除人物图像的部分top/left属性，并添加

height: 310px;
width: 550px;
object-fit: cover;

的.image类和一些小的变化。

样式根据需要，建议不要使用这样的定位使用全部来自top/bottom，因为这些将很难调试和了解行为

.wallpaper {
background: green;
height: 2000px;
width: 1920px;
position: absolute;
}
.flag {
height: 310px;
width: 550px;
background: white;
position: relative;
}
.horizontal {
position: relative;
background: rgba(0, 54, 128, 255);
height: 75px;
top: 40%;
}
.vertical {
position: relative;
top: -75px;
bottom: 0;
left: -75px;
right: 0;
margin: auto;
background: rgba(0, 54, 128, 255);
height: 310px;
width: 75px;
}
.vodka {

height: 200px;
width: 200px;

}
img {
position: relative;
bottom: 0;
right: 0;

}
.text {
position: absolute;
left: 450px;
top: 100px;
}
.mannen {
color: white;
position: relative;
top: 200px;
left: 75px;
}
.myten {
color: rgba(0, 54, 128, 255);
position: relative;
top: 200px;
left: 200px;
}
.legenden {
color: white;
position: relative;
left: 300px;
top: 200px;
}
.container {
background: rgba(0, 54, 128, 255);
position: fixed;
height: 100px;
width: 1920px;
top: 0;
}
.mikko {
color: white;
position: relative;
left: 800px;
}
.group {
position: relative;
left: 250px;
}
.flip-card {
background: transparent;
width: 550px;
height: 310px;
perspective: 1000px;
position: absolute;
top: 500px;
left: 450px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.image {
height: 310px;
width: 550px;
object-fit: cover;
position: relative;
transform: scale(-1, 1);
z-index: -1;
}

<div class="wallpaper">
<div class="group">
<div class="text">
<h1 style="font-family: Verdana">
<div class="mannen">Mannen,</div>
<div class="myten">myten,</div>
<div class="legenden">legenden!</div>
</h1>
</div>
<div class="vodka">
<img src="https://folkofolk.se/sites/default/files/styles/article_large/public/2016-02/Finlandia_0.jpg.jpeg?itok=2vkru5VU" style="width:550px;height:310px;" />
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flag">
<div class="horizontal"></div>
<div class="vertical"></div>
</div>
</div>
<div="flip-card-back">
<div class="image">
<img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" />
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="mikko">
<h1 style="font-family: Verdana">Mikko Tähtinen</h1>
</div>
</div>
</div>

简单的图片翻转:

.flag {
height: 310px;
width: 550px;
background: white;
position: relative;
margin: 20px;
}
.horizontal {
position: relative;
background: rgba(0, 54, 128, 255);
height: 75px;
top: 40%;
}
.vertical {
position: relative;
top: -75px;
left: -75px;
margin: auto;
background: rgba(0, 54, 128, 255);
height: 310px;
width: 75px;
}
.flipImage1 {
position: absolute;
top: 0;
left: 0;
background-color:white;
z-index: -10;
transform: rotateY(180deg);
}
.flag:hover {
transform: rotateY(180deg);
transform-style: preserve-3d;
}

<div class="flag">
<div class="horizontal"></div>
<div class="vertical"></div>
<img src="https://primatelounge.se/wp-content/uploads/2017/03/mikko-tahtinen-500x748.jpg" style="width:550px;height:310px;" class="flipImage1" />
</div>

Answer 2

好的，首先，你学习代码很好。第二，这可能是反直觉的，但你不应该使用position absolute和transform translate来定位这么多，你应该尝试使用display flex or grid，还有一个问题是，铬似乎有z-index: -1从.image的问题。

一个更简单的方法是使用transition-delay图像而不是图像视角变化