我在学校刚开始学习编码，我正在尝试做一个简单的项目。 我已经创建了一个由芬兰国旗和一个图像组成的翻转卡。问题是，当我悬停在旗帜上，旗帜翻转时，一半的图片不会显示出来。

顺晟科技：

好吧，首先，对你学习代码有好处。 其次，这可能违背直觉，但你不应该使用，对于这么多的定位，你应该尝试使用， 另外，问题是chrome似乎有问题。

一个更简单的方法是在图像上使用，而不是更改图像透视图

删除了person图像的某些属性并添加了

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

添加到类和一些小的更改。

样式根据需要，建议不要使用all from来使用这样的定位，因为这样会很难调试和了解行为

简单图像从上面翻转: