八 动画效果

Posted 2021-03-06 qfshini

1. 坐标系
    | 注意：在页面开发中，css的2D、3D效果都需要坐标系的相关概念
    | 在2D动画中，坐标系有两条轴，一条是X轴，一条是Y轴
    | 在3D动画中，坐标系多个一个轴，那就是纵深轴(Z轴)

2. 定义方式 --> transform
    | none: 没有效果
    | translate(x,y)：定义2D转换
        | x,y参数分别代表向x轴、y轴方向移动多少距离(像素)

    | translate3D(x,y,z)：定义3D转换
        | x,y,z参数分别代表向x轴、y轴、z轴方向移动多少距离(像素)

    | rotate(角度deg)：定义2D旋转

    | rotate3D(x,y,z,角度deg)：定义3D旋转

    | scale(x,y):定义2D的缩放转换
        | 注意：需要和perspective属性结合使用

    | scale3D(x,y,z)：定义3D缩放转换

    | skew(x-angle,y-angle)：定义X轴和Y轴的2D倾斜转换

    | perspective(n)：为3D转换元素定义透视视图