最近写一个新年签的项目,要使用卡片翻转的3D动画效果,像这样:
点击图片放大、翻转、然后飞走,于是想到了 css3 的 rotate3d()
属性来做翻转的效果。
简单介绍一下怎么使用:
rotate3d(x, y, z, a)
x
y
z
a
注:在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 微信浏览器确只显示了 放大 和 飞走的效果,中间有短暂的停顿,旋转动画并没有如期进行。
最终实现没有问题的方案如下:
.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 的属性目前主流浏览器基本都已经支持,但是或多或少不同的浏览器都存在一些奇奇怪怪的问题,所以这时候难免会有些坑,需要我们不断的去填补,所以记录下来
^_^
~