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中的z-index。

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

放大翻页卡上的图像

1 个答案: