html - z-index 和 CSS 旋转

Question

我使用 CSS 和 HTML 以及 CSS 转换制作了一些翻转卡片

当您将鼠标悬停在卡片上时，它会翻转并放大。我如何定位悬停的当前卡片以使用 z-index 和相对位置将其放在顶部，因为它在使用 css transform:rotate 时遇到问题？

所以我需要将悬停的卡片置于顶部。

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 180px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg) scale(1.3);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
    z-index:1;
  
}

/* Style the back side */
.flip-card-back {
    z-index:999;
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<div class="flip-card" style="float:left">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div style="position:relative; z-index:1">
                            <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <div style="position:relative; z-index:1">
                            <h1>John Doe</h1> 
                            <p>Architect & Engineer</p> 
                            <p>We love that guy</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flip-card" style="float:left">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div style="position:relative; z-index:1">
                            <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <div style="position:relative; z-index:1">
                            <h1>John Doe</h1> 
                            <p>Architect & Engineer</p> 
                            <p>We love that guy</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flip-card" style="float:left">
                <div class="flip-card-inner">
                    <div class="flip-card-front">
                        <div style="position:relative; z-index:1">
                            <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
                        </div>
                    </div>
                    <div class="flip-card-back">
                        <div style="position:relative; z-index:1">
                            <h1>John Doe</h1> 
                            <p>Architect & Engineer</p> 
                            <p>We love that guy</p>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

尝试将 z-index 添加到 .flip-card:hover 类。

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */

.flip-card {
  background-color: transparent;
  width: 180px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}


/* This container is needed to position the front and back side */

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}


/* Do an horizontal flip when you move the mouse over the flip box container */

.flip-card:hover {
  z-index: 10;
  position: relative;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg) scale(1.3);
}


/* Position the front and back side */

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


/* Style the front side (fallback if image is missing) */

.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 1;
}


/* Style the back side */

.flip-card-back {
  z-index: 999;
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

<div class="flip-card" style="float:left">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <div style="position:relative; z-index:1">
        <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
      </div>
    </div>
    <div class="flip-card-back">
      <div style="position:relative; z-index:1">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
</div>

<div class="flip-card" style="float:left">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <div style="position:relative; z-index:1">
        <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
      </div>
    </div>
    <div class="flip-card-back">
      <div style="position:relative; z-index:1">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
</div>

<div class="flip-card" style="float:left">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <div style="position:relative; z-index:1">
        <img src="img_avatar.png" alt="Avatar" style="width:300px;height:300px;">
      </div>
    </div>
    <div class="flip-card-back">
      <div style="position:relative; z-index:1">
        <h1>John Doe</h1>
        <p>Architect & Engineer</p>
        <p>We love that guy</p>
      </div>
    </div>
  </div>
</div>