使用 -webkit-rotate 时 Z-Index 不工作

Question

当边框在徽标图像上方旋转时，此代码可以正常工作，但如果我将边框的 z-index 更改为 9988，将图像的 z-index 更改为 9999，则代码无法正常工作。我错过了什么？我想让边框在图像

后面旋转

谢谢

#logo-position {width: 170px; height: 170px; position: absolute; }
  #mylogo     { width: 170px; height: 170px; position: absolute;}
  #mylogo img {position: absolute;}
  .logoborder {z-index:9999;} 
  .logotext {z-index:9988;}
  .logoborder:hover { -moz-animation: rotate 2s linear infinite;
       -webkit-animation: rotate 2s linear infinite;
       -o-animation: rotate 2s linear infinite;
       -ms-animation: rotate 2s linear infinite;
  }
  @-moz-keyframes rotate {  
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(360deg);}
  }
  @-webkit-keyframes rotate {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(360deg);}
  }
  @-ms-keyframes rotate {
   from {-ms-transform: rotate(0deg);}
   to {-ms-transform: rotate(360deg);}
  }
   @-o-keyframes rotate {
   from { -o-transform: rotate(0deg);}
   to {-o-transform: rotate(360deg);}
   }

<body> 
  <div id="logo-position">
   <div id="mylogo">
    <a href="http://www.makepassive.com">
 
     <img class="logoborder" src="http://i.stack.imgur.com/RhC7Z.png" alt="logo_170x170_300px-border" width="170" height="170"/>
     <img class="logotext" src="http://i.stack.imgur.com/PiyVY.png" alt="logo_170x170_300px-text" width="170" height="170"/>
    </a>
   </div>
  </div>
 </body>

Answer 1

问题是，当您将 .logotext 的 z-index 更改为 9999，并将 .logoborder 更改为 9988 时，您基本上将边框元素隐藏在图像后面。虽然你的图片是透明背景的PNG文件，但是会在.logoborder前面堆起来。结果，您将永远无法通过鼠标指针找到它。我为您的代码创建了一个 CODEPEN 示例，并将 border: 5px solid black; 添加到 .logotext 以显示问题。

求解，需要在.logoborder前加上.logotext，像这样：

<img class="logotext" src="http://i.stack.imgur.com/PiyVY.png" alt="logo_170x170_300px-text" width="170" height="170"/>
<img class="logoborder" src="http://i.stack.imgur.com/RhC7Z.png" alt="logo_170x170_300px-border" width="170" height="170"/>

然后，像这样更改 CSS 代码：

.logotext:hover + .logoborder{ -moz-animation: rotate 2s linear infinite;
    -webkit-animation: rotate 2s linear infinite;
    -o-animation: rotate 2s linear infinite;
    -ms-animation: rotate 2s linear infinite;
}

那就随心所欲吧

使用 -webkit-rotate 时 Z-Index 不工作

Z-Index not working while using -webkit-rotate

html

css

webkit

z-index