翻卡背面部分消失

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， 还有一个问题是 chrome 似乎在 z-index: -1 和 .image 之间存在问题。

一种更简单的方法是在图像上使用transition-delay，而不是改变图像透视图