我是如何解决 rotate3d() 在 ios 失效的问题

前言

最近写一个新年签的项目，要使用卡片翻转的3D动画效果，像这样：

点击图片放大、翻转、然后飞走，于是想到了 css3 的 rotate3d() 属性来做翻转的效果。

开始

简单介绍一下怎么使用：

rotate3d(x, y, z, a)

有3个参数：

• x
  number 类型，可以是0到1之间的数值，表示旋转轴X坐标方向的矢量。
• y
  number 类型， 可以是0到1之间的数值，表示旋转轴Y坐标方向的矢量。
• z
  number 类型， 可以是0到1之间的数值，表示旋转轴Z坐标方向的矢量。
• a
  angle 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

注：在3D空间之中，旋转有3个自由维度，描述了旋转轴。旋转轴由一组 [x, y, z] 矢量定义，并且通过变换源点传递（即通过 transform-origin CSS 属性定义）。如果这些矢量被赋予非标准值，即3个坐标值的平方和不等于1时，它将会被内部隐式标准化。非标准矢量，例如空值和 [0, 0, 0]，将会使旋转不起作用，但是不影响整个CSS属性的其他效果（译者注：如transform中的多项变换）——摘自MDN。

参考MDN：CSS3 rotate3d() 用法
简单来说就是在3d空间坐标系里，使用的是左手定则坐标系，然后如果你没有使用 transform-origin CSS 属性定义起点的话，默认起点是 [0,0,0]，然后通过 rotate 的前三个参数定义的终点连起来形成一个向量，这个向量就是要绕着旋转的轴，通过角度去控制转的角度和方向。

刚开始我是这样写的：
CSS:

.choosed {
    animation: choosed_card 2s ease normal both;
 }
 
// 动画
 @keyframes choosed_card {
  0% {
    transform: scale(1) rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0);
  }
  25% {
    transform: scale(1.3) rotate3d(0, 0, 0, 0deg) translate3d(0, 0, 0);
  }
  75% {
    transform: scale(1.3) rotate3d(0, 0, 0, 360deg) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.3) rotate3d(0, 0, 0, 360deg) translate3d(0, -100vh, 0);
  }
}

这看起来似乎没有什么问题

问题

但是真机测试发现，在 chrome 浏览器和 android 微信浏览器均正常显示动画效果，但是在 ios 微信浏览器确只显示了 放大 和 飞走的效果，中间有短暂的停顿，旋转动画并没有如期进行。

排查

1. 尝试改变角度，rotate3d(0, 0, 0, 360deg) 改成 rotate3d(0, 0, 0, 180deg)，发现有效果，但是过了就不行。
2. 在其父元素增加3d属性：perspective: 1000px; 发现不行。
3. 声明动画增加厂商前缀：@-webkit-keyframes， 发信不行。
4. 使用 rotateY(360deg)， 本地真机测试发现可行，上线测试确发现又失效了。
5. 在 class 里添加初始状态 transform: scale(1) rotateY(0deg) translate3d(0, 0, 0); 发现可行。

解决

最终实现没有问题的方案如下：

.choosed {
   transform: scale(1) rotateY(0deg) translate3d(0, 0, 0);
   animation: choosed_card 2s ease normal both;
 }
// 动画
 @keyframes choosed_card {
  0% {
    transform: scale(1) rotateY(0deg) translate3d(0, 0, 0);
  }
  25% {
    transform: scale(1.3) rotateY(0deg) translate3d(0, 0, 0);
  }
  75% {
    transform: scale(1.3) rotateY(360deg) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.3) rotateY(360deg) translate3d(0, -100vh, 0);
  }
}

上线后真机测试，ios 、android 动画都可正常进行。

结论

虽然 CSS3 的属性目前主流浏览器基本都已经支持，但是或多或少不同的浏览器都存在一些奇奇怪怪的问题，所以这时候难免会有些坑，需要我们不断的去填补，所以记录下来

如果这篇文章对你有帮助的话，请给个赞吧，谢谢 ^_^~