Question

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

或CodePen（如果您是这样滚动的话）：https://codepen.io/W3-design/pen/pBOJyy

当我将鼠标悬停在桌面上的图像上时，CSS过渡可以正常工作，它会旋转图像并更改z-index以将悬停的图像置于前景，当我“悬停/轻按”时不会发生相同的行为Safari和Chrome中iOS中的每个图像，CSS过渡都可以，但是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：仍然存在z-index在iOS中反转的问题，因此底部图像显示在顶部。

这无需其他转换即可解决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的prefixfree？

在HTML头中尝试一下：

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

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

1 个答案: