01 2D 转换

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换
rotate(angle) 定义 2D 旋转，在参数中规定角度
translate(x,y) 定义 2D 转换
translateX(x) 定义转换，只是用 X 轴的值
translateY(y) 定义转换，只是用 Y 轴的值
scale(x,y) 定义 2D 缩放转换
scaleX(x) 通过设置 X 轴的值来定义缩放转换
scaleY(y) 通过设置 Y 轴的值来定义缩放转换

02 3D 转换

rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
translate3d(x,y,z) 定义 3D 转换
translateZ(z) 定义 3D 转换，只是用 Z 轴的值
scale3d(x,y,z) 定义 3D 缩放转换
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵

03 perspective

使子对象在做 3d 转换的时候有 3d 效果。

2020-02-09 15.36.38.gif

1.先对父级时间 perspective 属性

  1. export function perspective(): Override {
  2.     return {
  3.         perspective: 300,
  4.         // 设置变换的锚点位置
  5.         // originX: 0,
  6.     }
  7. }

2.对子对象施加 3d 转换

export function perspective(): Override {
    return {
        perspective: 300,
        // 设置变换的锚点位置
        // originX: 0,
    }
}