Часть обратной стороны откидной карты исчезает

ProgramBox

Часть обратной стороны откидной карты исчезает

Post author:admin
Запись опубликована:10 января, 2022
Post category:Вопросы по программированию

#html #css #flip

Вопрос:

Я только начал изучать кодирование в школе, и я пытаюсь сделать простой проект. Я создал флип — карту, состоящую из финского флага и изображения. Проблема в том, что когда я навожу курсор на флаг и он переворачивается, половина изображения не отображается.

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

Ответ №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>

Ответ №2:

Хорошо, во-первых, хорошо, что вы изучили код. во-вторых, это может противоречить интуиции , но вы не должны использовать position absolute , и transform translate для такого позиционирования вам следует попробовать использовать display flex or grid , также проблема в том, что у chrome, похоже, возникают проблемы z-index: -1 с этим .image .

более простой способ сделать это-использовать transition-delay изображение вместо изменения перспективы изображения

Метки: Часть обратной стороны откидной карты исчезает