html - 放大翻转卡片上的图像

Question

我一直在学习翻转卡片，但遇到了一个问题。我有两张卡片，当它们翻转过来时，背面有一张图片。第二次移动鼠标，图片应该放大。我遇到的问题是，当左侧卡片上的图像被放大时，它隐藏在右侧第二张卡片的后面。然而，当右边卡片上的图像被放大时，它会出现在第一张卡片的前面。我想要的是无论翻转什么卡，图片都出现在前面。我读到这是 z-index 的问题，但我一直未能弄清楚在哪里以及如何设置它。

网页的代码是:

<div class = "center">

<div class="flip3d">

  <div class="back"> <img class="exampleGif enlargeRight"  src="https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg?auto=compress&cs=tinysrgb&h=350"></div>

    <div class="front" style="width:400% height:300%"> 

        <p>Cats</p> 

    </div>

</div>

<div class="flip3d">

        <div class="back"> <img class = "exampleGif enlargeLeft" src="https://images.pexels.com/photos/66898/elephant-cub-tsavo-kenya-66898.jpeg?auto=compress&cs=tinysrgb&h=350"></div>

        <div class="front" style="width:400% height:300%">

            <p>Elephant</p>

        </div>

    </div>

css文件是:

.flip3d{
  width:400px;
  height:300px;
  margin: 10px;
  float: left;
}

.flip3d > .front{
  position: absolute;
  transform: perspective(600px) rotateY(0deg);
  width:400px;
  height:300px;
  border-radius: 7px;
  background: #267326;      /* was #FCO     */
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
  font-size:1.5vw;
  font-family: Arial, Helvetica, sans-serif;
  font-style: oblique;
  color: white;
  text-align: center;
}

.flip3d > .back{
  position: absolute;
  transform: perspective(600px) rotateY(180deg);
  width:400px;
  height:300px;
  border-radius: 7px;
  background: #80BFFF;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
}

.flip3d:hover > .front{
  transform: perspective(600px) rotateY(-180deg);
}

.flip3d:hover > .back{
  transform: perspective(600px) rotateY(0deg);
}

img.exampleGif {
  width:400px;
  height:300px;
  z-index:0;
 position:relative;
}

.center {
    margin: auto;
    width: 50%;
    border: none;
    padding: 10px;
}

.enlargeRight:hover {
    transform:scale(2,2);
    transform-origin:0 0;
    transition: all .5s;
}

.enlargeLeft:hover {
    transform:scale(2,2);
    transform-origin:right top;
    transition: all .5s;

我使用的代码位于 here .

谢谢你的帮助。

Answer 1

在下面的类中添加 z-index，其值与我所做的相同。很少doc以增加您的知识。

编辑:这不需要等于 1 或 2 的值。只是 .back 中的 z-index 必须大于 .front 中的。

.flip3d > .back{
  position: absolute;
  transform: perspective(600px) rotateY(180deg);
  width:400px;
  height:300px;
  border-radius: 7px;
  background: #80BFFF;
  backface-visibility: hidden;
  transition: transform .5s linear 0s;
  z-index: 1;
}