z-index在ios设备上无法正常工作

时间：2017-06-05 02:18:50

标签： css animation z-index

我正在开发其他设备上的预加载器动画，除了ios浏览器外，一切正常......

最初，宝丽来图像应该在后面，（它应该看起来像是从相机打印宝丽来图像），然后它翻转然后位于相机顶部然后缩放到0为outro的宝丽来。

here is the codepen codes 

handler
.preloader {
  background: #f8f8f8;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.stack,
.cameras {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translateX(-50%) translateY(-20%);
  -webkit-transform: translateX(-50%) translateY(-20%);
  -o-transform: translateX(-50%) translateY(-20%);
  -ms-transform: translateX(-50%) translateY(-20%);
  transform: translateX(-50%) translateY(-20%);
}

.cameras {
  -webkit-perspective: 800px;
  perspective: 800px;
  -moz-transform: translateX(-50%) translateY(-85%);
  -webkit-transform: translateX(-50%) translateY(-85%);
  -o-transform: translateX(-50%) translateY(-85%);
  -ms-transform: translateX(-50%) translateY(-85%);
  transform: translateX(-50%) translateY(-85%);
}

.preloader .cameras span img.camera-img {
  width: 100%;
  position: relative;
  z-index: 9;
}

.cameras span {
  display: inline-block;
  position: relative;
}

.cameras span .polaroid {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  max-width: 130px;
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  -webkit-transition: all 2s linear;
  -moz-transition: all 2s linear;
  -ms-transition: all 2s linear;
  -o-transition: all 2s linear;
  transition: all 2s linear;
  animation: ikot infinite 5s linear;
}

@keyframes ikot {
  0% {
    bottom: 0;
    z-index: 0;
  }
  60% {
    bottom: 150%;
    z-index: 0;
    -webkit-transform: rotateX(0deg) translateZ(2px);
    -ms-transform: rotateX(0deg) translateZ(2px);
    -o-transform: rotateX(0deg) translateZ(2px);
    transform: rotateX(0deg) translateZ(2px);
  }
  66% {
    bottom: 180%;
    z-index: 0;
    -webkit-transform: rotateX(90deg) translateZ(2px);
    -ms-transform: rotateX(90deg) translateZ(2px);
    -o-transform: rotateX(90deg) translateZ(2px);
    transform: rotateX(90deg) translateZ(2px);
  }
  68% {
    bottom: 30%;
    z-index: 0;
    -webkit-transform: rotateX(180deg) translateZ(2px);
    -ms-transform: rotateX(180deg) translateZ(2px);
    -o-transform: rotateX(180deg) translateZ(2px);
    transform: rotateX(180deg) translateZ(2px);
  }
  75% {
    bottom: 0%;
    z-index: 0;
    -webkit-transform: rotateX(-80deg) translateZ(2px);
    -ms-transform: rotateX(-80deg) translateZ(2px);
    -o-transform: rotateX(-80deg) translateZ(2px);
    transform: rotateX(-80deg) translateZ(2px);
  }
  80% {
    bottom: -150%;
    z-index: 0;
    -webkit-transform: rotateX(-140deg) translateZ(2px);
    -ms-transform: rotateX(-140deg) translateZ(2px);
    -o-transform: rotateX(-140deg) translateZ(2px);
    transform: rotateX(-140deg) translateZ(2px);
  }
  82% {
    bottom: -120%;
    z-index: 99;
    -webkit-transform: rotateX(-75deg) translateZ(2px);
    -ms-transform: rotateX(-75deg) translateZ(2px);
    -o-transform: rotateX(-75deg) translateZ(2px);
    transform: rotateX(-75deg) translateZ(2px);
  }
  86% {
    bottom: -55%;
    z-index: 99;
    -webkit-transform: rotateX(-40deg) translateZ(2px);
    -ms-transform: rotateX(-40deg) translateZ(2px);
    -o-transform: rotateX(-40deg) translateZ(2px);
    transform: rotateX(-40deg) translateZ(2px);
  }
  90% {
    bottom: 0;
    z-index: 99;
    -webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
    -ms-transform: rotateX(0) translateZ(2px) scale(1.8);
    -o-transform: rotateX(0) translateZ(2px) scale(1.8);
    transform: rotateX(0) translateZ(2px) scale(1.8);
  }
  95% {
    bottom: 0;
    z-index: 1;
    -webkit-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
  }
  100% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
}

@-webkit-keyframes ikot {
  0% {
    bottom: 0;
    z-index: 0;
  }
  60% {
    bottom: 150%;
    z-index: 0;
    -webkit-transform: rotateX(0deg) translateZ(2px);
    -ms-transform: rotateX(0deg) translateZ(2px);
    -o-transform: rotateX(0deg) translateZ(2px);
    transform: rotateX(0deg) translateZ(2px);
  }
  66% {
    bottom: 180%;
    z-index: 0;
    -webkit-transform: rotateX(90deg) translateZ(2px);
    -ms-transform: rotateX(90deg) translateZ(2px);
    -o-transform: rotateX(90deg) translateZ(2px);
    transform: rotateX(90deg) translateZ(2px);
  }
  68% {
    bottom: 30%;
    z-index: 0;
    -webkit-transform: rotateX(180deg) translateZ(2px);
    -ms-transform: rotateX(180deg) translateZ(2px);
    -o-transform: rotateX(180deg) translateZ(2px);
    transform: rotateX(180deg) translateZ(2px);
  }
  75% {
    bottom: 0%;
    z-index: 0;
    -webkit-transform: rotateX(-80deg) translateZ(2px);
    -ms-transform: rotateX(-80deg) translateZ(2px);
    -o-transform: rotateX(-80deg) translateZ(2px);
    transform: rotateX(-80deg) translateZ(2px);
  }
  80% {
    bottom: -150%;
    z-index: 0;
    -webkit-transform: rotateX(-140deg) translateZ(2px);
    -ms-transform: rotateX(-140deg) translateZ(2px);
    -o-transform: rotateX(-140deg) translateZ(2px);
    transform: rotateX(-140deg) translateZ(2px);
  }
  82% {
    bottom: -120%;
    z-index: 99;
    -webkit-transform: rotateX(-75deg) translateZ(2px);
    -ms-transform: rotateX(-75deg) translateZ(2px);
    -o-transform: rotateX(-75deg) translateZ(2px);
    transform: rotateX(-75deg) translateZ(2px);
  }
  86% {
    bottom: -55%;
    z-index: 99;
    -webkit-transform: rotateX(-40deg) translateZ(2px);
    -ms-transform: rotateX(-40deg) translateZ(2px);
    -o-transform: rotateX(-40deg) translateZ(2px);
    transform: rotateX(-40deg) translateZ(2px);
  }
  90% {
    bottom: 0;
    z-index: 99;
    -webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
    -ms-transform: rotateX(0) translateZ(2px) scale(1.8);
    -o-transform: rotateX(0) translateZ(2px) scale(1.8);
    transform: rotateX(0) translateZ(2px) scale(1.8);
  }
  95% {
    bottom: 0;
    z-index: 1;
    -webkit-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
  }
  100% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
}

@-moz-keyframes ikot {
  0% {
    bottom: 0;
    z-index: 0;
  }
  60% {
    bottom: 150%;
    z-index: 0;
    -webkit-transform: rotateX(0deg) translateZ(2px);
    -ms-transform: rotateX(0deg) translateZ(2px);
    -o-transform: rotateX(0deg) translateZ(2px);
    transform: rotateX(0deg) translateZ(2px);
  }
  66% {
    bottom: 180%;
    z-index: 0;
    -webkit-transform: rotateX(90deg) translateZ(2px);
    -ms-transform: rotateX(90deg) translateZ(2px);
    -o-transform: rotateX(90deg) translateZ(2px);
    transform: rotateX(90deg) translateZ(2px);
  }
  68% {
    bottom: 30%;
    z-index: 0;
    -webkit-transform: rotateX(180deg) translateZ(2px);
    -ms-transform: rotateX(180deg) translateZ(2px);
    -o-transform: rotateX(180deg) translateZ(2px);
    transform: rotateX(180deg) translateZ(2px);
  }
  75% {
    bottom: 0%;
    z-index: 0;
    -webkit-transform: rotateX(-80deg) translateZ(2px);
    -ms-transform: rotateX(-80deg) translateZ(2px);
    -o-transform: rotateX(-80deg) translateZ(2px);
    transform: rotateX(-80deg) translateZ(2px);
  }
  80% {
    bottom: -150%;
    z-index: 0;
    -webkit-transform: rotateX(-140deg) translateZ(2px);
    -ms-transform: rotateX(-140deg) translateZ(2px);
    -o-transform: rotateX(-140deg) translateZ(2px);
    transform: rotateX(-140deg) translateZ(2px);
  }
  82% {
    bottom: -120%;
    z-index: 99;
    -webkit-transform: rotateX(-75deg) translateZ(2px);
    -ms-transform: rotateX(-75deg) translateZ(2px);
    -o-transform: rotateX(-75deg) translateZ(2px);
    transform: rotateX(-75deg) translateZ(2px);
  }
  86% {
    bottom: -55%;
    z-index: 99;
    -webkit-transform: rotateX(-40deg) translateZ(2px);
    -ms-transform: rotateX(-40deg) translateZ(2px);
    -o-transform: rotateX(-40deg) translateZ(2px);
    transform: rotateX(-40deg) translateZ(2px);
  }
  90% {
    bottom: 0;
    z-index: 99;
    -webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
    -ms-transform: rotateX(0) translateZ(2px) scale(1.8);
    -o-transform: rotateX(0) translateZ(2px) scale(1.8);
    transform: rotateX(0) translateZ(2px) scale(1.8);
  }
  95% {
    bottom: 0;
    z-index: 1;
    -webkit-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
  }
  100% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
}

@-ms-keyframes ikot {
  0% {
    bottom: 0;
    z-index: 0;
  }
  60% {
    bottom: 150%;
    z-index: 0;
    -webkit-transform: rotateX(0deg) translateZ(2px);
    -ms-transform: rotateX(0deg) translateZ(2px);
    -o-transform: rotateX(0deg) translateZ(2px);
    transform: rotateX(0deg) translateZ(2px);
  }
  66% {
    bottom: 180%;
    z-index: 0;
    -webkit-transform: rotateX(90deg) translateZ(2px);
    -ms-transform: rotateX(90deg) translateZ(2px);
    -o-transform: rotateX(90deg) translateZ(2px);
    transform: rotateX(90deg) translateZ(2px);
  }
  68% {
    bottom: 30%;
    z-index: 0;
    -webkit-transform: rotateX(180deg) translateZ(2px);
    -ms-transform: rotateX(180deg) translateZ(2px);
    -o-transform: rotateX(180deg) translateZ(2px);
    transform: rotateX(180deg) translateZ(2px);
  }
  75% {
    bottom: 0%;
    z-index: 0;
    -webkit-transform: rotateX(-80deg) translateZ(2px);
    -ms-transform: rotateX(-80deg) translateZ(2px);
    -o-transform: rotateX(-80deg) translateZ(2px);
    transform: rotateX(-80deg) translateZ(2px);
  }
  80% {
    bottom: -150%;
    z-index: 0;
    -webkit-transform: rotateX(-140deg) translateZ(2px);
    -ms-transform: rotateX(-140deg) translateZ(2px);
    -o-transform: rotateX(-140deg) translateZ(2px);
    transform: rotateX(-140deg) translateZ(2px);
  }
  82% {
    bottom: -120%;
    z-index: 99;
    -webkit-transform: rotateX(-75deg) translateZ(2px);
    -ms-transform: rotateX(-75deg) translateZ(2px);
    -o-transform: rotateX(-75deg) translateZ(2px);
    transform: rotateX(-75deg) translateZ(2px);
  }
  86% {
    bottom: -55%;
    z-index: 99;
    -webkit-transform: rotateX(-40deg) translateZ(2px);
    -ms-transform: rotateX(-40deg) translateZ(2px);
    -o-transform: rotateX(-40deg) translateZ(2px);
    transform: rotateX(-40deg) translateZ(2px);
  }
  90% {
    bottom: 0;
    z-index: 99;
    -webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
    -ms-transform: rotateX(0) translateZ(2px) scale(1.8);
    -o-transform: rotateX(0) translateZ(2px) scale(1.8);
    transform: rotateX(0) translateZ(2px) scale(1.8);
  }
  95% {
    bottom: 0;
    z-index: 1;
    -webkit-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
  }
  100% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
}

@-o-keyframes ikot {
  0% {
    bottom: 0;
    z-index: 0;
  }
  60% {
    bottom: 150%;
    z-index: 0;
    -webkit-transform: rotateX(0deg) translateZ(2px);
    -ms-transform: rotateX(0deg) translateZ(2px);
    -o-transform: rotateX(0deg) translateZ(2px);
    transform: rotateX(0deg) translateZ(2px);
  }
  66% {
    bottom: 180%;
    z-index: 0;
    -webkit-transform: rotateX(90deg) translateZ(2px);
    -ms-transform: rotateX(90deg) translateZ(2px);
    -o-transform: rotateX(90deg) translateZ(2px);
    transform: rotateX(90deg) translateZ(2px);
  }
  68% {
    bottom: 30%;
    z-index: 0;
    -webkit-transform: rotateX(180deg) translateZ(2px);
    -ms-transform: rotateX(180deg) translateZ(2px);
    -o-transform: rotateX(180deg) translateZ(2px);
    transform: rotateX(180deg) translateZ(2px);
  }
  75% {
    bottom: 0%;
    z-index: 0;
    -webkit-transform: rotateX(-80deg) translateZ(2px);
    -ms-transform: rotateX(-80deg) translateZ(2px);
    -o-transform: rotateX(-80deg) translateZ(2px);
    transform: rotateX(-80deg) translateZ(2px);
  }
  80% {
    bottom: -150%;
    z-index: 0;
    -webkit-transform: rotateX(-140deg) translateZ(2px);
    -ms-transform: rotateX(-140deg) translateZ(2px);
    -o-transform: rotateX(-140deg) translateZ(2px);
    transform: rotateX(-140deg) translateZ(2px);
  }
  82% {
    bottom: -120%;
    z-index: 99;
    -webkit-transform: rotateX(-75deg) translateZ(2px);
    -ms-transform: rotateX(-75deg) translateZ(2px);
    -o-transform: rotateX(-75deg) translateZ(2px);
    transform: rotateX(-75deg) translateZ(2px);
  }
  86% {
    bottom: -55%;
    z-index: 99;
    -webkit-transform: rotateX(-40deg) translateZ(2px);
    -ms-transform: rotateX(-40deg) translateZ(2px);
    -o-transform: rotateX(-40deg) translateZ(2px);
    transform: rotateX(-40deg) translateZ(2px);
  }
  90% {
    bottom: 0;
    z-index: 99;
    -webkit-transform: rotateX(0) translateZ(2px) scale(1.8);
    -ms-transform: rotateX(0) translateZ(2px) scale(1.8);
    -o-transform: rotateX(0) translateZ(2px) scale(1.8);
    transform: rotateX(0) translateZ(2px) scale(1.8);
  }
  95% {
    bottom: 0;
    z-index: 1;
    -webkit-transform: scale(1.8);
    -ms-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
  }
  100% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }
}

.preloader .cameras span.current {
  display: block;
}

.preloader .cameras span {
  display: none;
  perspective: 0;
}

请帮忙

0 个答案:

没有答案
相关问题
最新问题