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 class。

/* 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>

Answer 2

在您的 .flip-card class 中添加 position: relative 并在 hover case .flip-card:hover

中添加 z-index: 1

翻转卡片容器 - 将宽度和高度设置为您想要的任何值。我们添加了边框属性以演示翻转本身在悬停时脱离盒子（如果您不想要 3D 效果，请移除透视图

.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 */
  position: relative
}
.flip-card:hover {
  z-index: 1
}

/* 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 3

您必须在 flip-card:hover 上添加 z-index 并将 position:relative 添加到卡片

/* 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;
  position: relative;
  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);
}
.flip-card:hover{
z-index: 9;
}

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

z-index 和 CSS 旋转

z-index and CSS rotate

html

css

css-transitions