水果手机 Safari transform rotateY 不兼容问题

移动端写css3 时 发现在safari 上  一个元素使用了  transform:rotateY(19deg);   显示有问题。

.class{    transform: scale(0.85) rotateY(10deg);
    -moz-transform: scale(0.85) rotateY(10deg);
    -o-transform: scale(0.85) rotateY(10deg);
    -webkit-transform: scale(0.85) rotateY(10deg);
}

然后挨着试在class 元素上添加 

transform-style: perspective-3d， 或者visibility:visible , perspective:1000, 也都无济于事，

transform-style 两个值 flat 即默认 2d，perspective-3d 即 所有子元素在3d空间中展示，

perspective ： w3c 上看了 一段   试着 在父类元素上添加 perspective 小图标果断显示出来了

.faterclass{
    transform: perspective(1000);
    -moz-transform: perspective(1000);
    -o-transform: perspective(1000);
    -webkit-transform: perspective(1000);
}

再 说下 如果  元素使用动画 用了  transfrom  属性 

.class {
  animation: dh 2.5s linear infinite alternate;
  -webkit-animation: dh 2.5s linear infinite alternate;
}

@keyframes dh {
  form {
    transform: scale(0.7) rotateY(150deg);
    -moz-transform: scale(0.7) rotateY(150deg);
    -o-transform: scale(0.7) rotateY(150deg);
    -webkit-transform: scale(0.7) rotateY(150deg);
  }
  to {
    transform: scale(0.95) rotateY(360deg);
    -moz-transform: scale(0.95) rotateY(360deg);
    -o-transform: scale(0.95) rotateY(360deg);
    -webkit-transform: scale(0.95) rotateY(360deg);
  }
}

需要在.class 里加上初始的 效果

.class {
  -moz-transform: scale(0.85) rotateY(10deg);
  -o-transform: scale(0.85) rotateY(10deg);
  -webkit-transform: scale(0.85) rotateY(10deg);
  animation: dh 2.5s linear infinite alternate;
  -webkit-animation: dh 2.5s linear infinite alternate;
}