翻盖卡背面部分消失

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

好的，首先，祝你学习代码愉快。其次，这可能有违直觉，但你不应该使用 position absolute 和 transform translate 来进行如此多的定位，你应该尝试使用 display flex or grid，还有一个问题是 chrome 似乎与 z-index: -1 有问题 .image.

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

Answer 2

删除了人物图像的一些 top/left 属性并添加了

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

.image class 和一些小改动。

Style according to need and it is advised not to use such a positioning using all from top/bottom as these will be hard to debug and know the behavior

.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>

翻盖卡背面部分消失

Part of the back of the flip card disappears

html

css

flip

上面的简单图像翻转：