使用变换旋转和缩放的悬停效果的 z-index 问题

Question

我认为我的旋转和缩放悬停效果存在 z-index 问题。

当鼠标悬停在图片上时，它会翻转并放大并显示图片背面的细节等。

问题是图片都是排成行的，而且它们之间的边距很小。所以当他们缩放时，他们需要在图像的任何一侧重叠。目前这种重叠在左侧和顶部很好，但重叠在右侧和下方的图像下方..真的很奇怪！

这是我的代码 - Html

<div id="games-container">  

    <div class="flip-container game">
            <div class="flipper">
                <a href="#">
                    <div class="front">
                      <h1>Front</h1>
                    </div>
                    <div class="back">
                            <span class="game-title">
                                <h3>BACK</h3>
                                <span class="mob-icon"></span>
                            </span>

                            <button class="button green"><a href="#">Play Now</a></button>
                            <button class="blue button"><a href="#">More Info</a></button>
                    </div>

                </a>
            </div>
    </div>


<div class="flip-container game">
            <div class="flipper">
                <a href="#">
                    <div class="front">
                      <h1>Front</h1>
                    </div>
                    <div class="back">
                            <span class="game-title">
                                <h3>BACK</h3>
                                <span class="mob-icon"></span>
                            </span>

                            <button class="button green"><a href="#">Play Now</a></button>
                            <button class="blue button"><a href="#">More Info</a></button>
                    </div>

                </a>
            </div>
    </div>


<div class="flip-container game">
            <div class="flipper">
                <a href="#">
                    <div class="front">
                      <h1>Front</h1>
                    </div>
                    <div class="back">
                            <span class="game-title">
                                <h3>BACK</h3>
                                <span class="mob-icon"></span>
                            </span>

                            <button class="button green"><a href="#">Play Now</a></button>
                            <button class="blue button"><a href="#">More Info</a></button>
                    </div>

                </a>
            </div>
    </div>

CSS -

    /* make things pretty */
#games-container{
    width:800px;
  margin:0 auto;
}
#games-container div.game{
  margin: 0 8px 15px;
  float: left;
    position: relative;
    z-index: 1;
}
#main-container div.inner-container div.game .front img, #main-container div.inner-container div.game .back img{
    width:185px;
  height: 145px;
}
span.game-title {
    background-color:rgba(25,25,25,0.6);
    display: block;
    position: absolute;
    width: 100%;
    top: 0px;
    margin-bottom: 25px;
    text-align: center;
    z-index: 1;
}
span.game-title h3 {
    padding: 5px;
}
.game h3, .game:hover span.game-title{
      color:silver;
      transition:all 0.2s ease-in;
      -webkit-transition:all 0.2s ease-in;
}
.game:hover h3, .game:hover span.game-title{
      color:#fff;
      background-color: #0c0c0c;
}
.game a{
    display: block;
}

.back > .button{
    position: relative;
    z-index: 1;
}
.button{
    display: block;
    padding: 5px 10px;
    margin:5px auto;
    width:70%;
    clear: both;
    color:#fff;
}
button a{
    text-decoration: none;
    color:#e5e5e5;
    display: block;
    transition: ease-in 0.12s;
}
button.green:hover{
    background-color: #00B200;
}
button:hover a{
    color:#fff;
    transform:scale(1.1);
}
.back > .button.green{
margin-top: 45px;
}
button{
    color:#000;
    border:none;
}
button.green{
    background-color: #419907;
    transition:background-color 0.4s ease-in;
    -webkit-transition:background-color 0.4s ease-in;
}
button.blue{
    background-color:#063e9b;
    transition:background-color 0.4s ease-in;
    -webkit-transition:background-color 0.4s ease-in
}

/* end of making things pretty*/



/* do some flipping */

.flip-container {
    perspective: 900px
    transform-style: preserve-3d;
}

.flip-container:hover .back {
    transform: rotateY(0deg) scale(1.3);
  z-index:4;
    }

.flip-container:hover .front {
      transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 185px;
    height: 150px;
}

/* flip speed goes here */
.flipper {
    transition: 0.9s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.4s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
  width: 185px;
  height: 145px;
}

.front {
    z-index: 2;
    transform: rotateY(0deg);
  background-color: #333;
  color: #000;
  text-align: center;
}

.back {
    transform: rotateY(-180deg);
  background-color: #010b15;
  border: solid 2px #034baf;
}

Answer 1

将z-index: 2 !important;添加到.flip-container:hover

.flip-container:hover {
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    z-index: 2 !important;
}

Fiddle

Answer 2

因为您将第一个 z-index 放在此选择器 #games-container div.game 上，您可以将悬停选择器更改为此以删除重要的属性 :

#games-container div.game:hover {
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -ms-transform: scale(1.25);
    z-index: 2;
}

See it here

使用变换旋转和缩放的悬停效果的 z-index 问题

z-index issue on hover effect using transform rotate and scale

html

css

z-index

scale