【问题标题】：z-index and CSS rotatez-index 和 CSS 旋转
【发布时间】：2019-08-19 13:12:32
【问题描述】：
我使用 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>
【问题讨论】：
标签：
html
css
css-transitions
【解决方案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>
【解决方案2】：
您必须在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>
【解决方案3】：
在.flip-card 类中添加position: relative 并在悬停情况下添加z-index: 1 .flip-card:hover
翻转卡片容器 - 将宽度和高度设置为您想要的任何值。我们添加了边框属性来证明翻转本身在悬停时会开箱即用（如果您不想要 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>