Part of the back of the flip card disappears-CodePudding

I have just started to learn about coding in school, and I'm trying to make a simple project. I have created a flip card consisting of the Finnish flag and an image. The problem is that when I hover over the flag and it flips, half the picture doesn't show.

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

CodePudding user response：

Ok first, good on you for learning code. second, this might be counter intuitive but you shouldn't be using position absolute and transform translate for this much positioning you should try using display flex or grid, also the problem is that chrome seems to be having problems with z-index: -1 from that .image.

an easier way to do this is to use transition-delay on the image instead of having the image perspective change

CodePudding user response：

Removed some of the top/left properties of the person image and added

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

to the .image class and some minor changes .

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>

Simple image flip from above :

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