在macOS Safari和iOS浏览器中悬停时的CSS转换和z-index错误[重复]

Question

这个问题在这里已有答案：

• Bug in CSS3 rotateY transition on Safari? 1回答

检查JSFiddle：https://jsfiddle.net/mavicnz/eph7bmx8/21/

或CodePen，如果这是你如何滚动：https://codepen.io/W3-design/pen/pBOJyy

当我将鼠标悬停在桌面上的图像上时，CSS转换正常工作，它会旋转图像并更改z-index以将悬停的图像带到前台，当我“悬停/点击”每个图像时，不会发生相同的行为在Safari和Chrome中的iOS过渡是可以的，但是z-index完全搞砸了。

您会注意到，当页面加载时，iOS上的z-index根本不受尊重，图像以标记顺序显示:(

我希望iOS“悬停/点击”结果与桌面相同。

注意：我已经阅读了一些关于将translate3d添加到img CSS的帖子，但如果您有多个我想要的转换，这不起作用。

注意2.0：我使用这个CSS解决方法只针对Safari，因为那是带有问题的浏览器。 is there a css hack for safari only NOT chrome?

注意3.0：@Kaiido已经在iOS和MacOS上提供了解决此问题的方法，它在上面链接。

注意4.0：在iOS中仍然存在z-index相反的问题，因此底部图像显示在顶部。

这解决了z-index问题而没有其他转换：

-webkit-transform: translate3d(0,0,0);

这不能解决z-index问题：

-webkit-transform: translate3d(0,0,0) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);

HTML：

<div class="stacked-images">
  <img src="https://via.placeholder.com/320x180/0000FF">
  <img src="https://via.placeholder.com/320x180/FF0000">
  <img src="https://via.placeholder.com/320x180/00FF00">
</div>

SCSS：

.stacked-images {
    min-height: 500px;
    position: relative;
    margin: 20px;

    img {
      position: absolute;
      opacity: 0.9;
      transition: transform .5s ease-in-out;
      transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
      -webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);

      &:nth-of-type(1) {
        z-index: 100;
        top: 0;
      }

      &:nth-of-type(2) {
        z-index: 90;
        top: 80px;
      }

      &:nth-of-type(3) {
        z-index: 80;
        top: 160px;
      }
      &:hover {
          transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
          -webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
          opacity: 1;
          z-index: 101;
      }
   }
}

CSS :(对于那些需要它的人）

.stacked-images {
  position: relative;
  margin: 20px;
}
.stacked-images img {
  position: absolute;
  opacity: 0.9;
  transition: transform .5s ease-in-out;
  transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);  
  -webkit-transform: rotate3d(1, 0, 0, -55deg) rotate3d(0, 0, 1, -30deg);
}
.stacked-images img:nth-of-type(1) {
  z-index: 100;
  top: 0;
}
.stacked-images img:nth-of-type(2) {
  z-index: 90;
  top: 80px;
}
.stacked-images img:nth-of-type(3) {
  z-index: 80;
  top: 160px;
}
.stacked-images img:hover {
  transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
  -webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
  opacity: 1;
  z-index: 101;
}

Answer 1

你有没有尝试过Lea Verou的前缀？

在HTML头中尝试这个：

<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>