一、2D转换：transform
1）移动：translate（x,y)类似定位，px，%记得把移动放其他属性前面
2）旋转：rotate（deg)
3）缩放：scale（x,y）倍数，1/2/3...0.5缩小
伪元素写结构时必须加content:””;
1》转换中心点：transform-origin:x y;（可以%，可以方位名词）

二、动画：animation
        1）先定义动画
                @keyframes+动画名字{0%-100%}
2）调用动画
Animation:name 时间；+其他
运动曲线：linear匀速
步长：steps()
循环播放：infinite
逆播放：alternate
动画暂停：animation-play-state:paused;
结束后:回到起始状态backwards/保持不动forwards;
三、3D转换
1）移动：translateX/Y/Z/3d(x,y.z)一般用px;
2）透视：perspective：px;写在被观察元素的父盒子上。
3）旋转：rotateX/Y/Z(deg)
4）3d呈现：transfrom-style写给父盒子，影响子盒子

一、2D转换：transform
1）移动：translate（x,y)类似定位，px，%记得把移动放其他属性前面
2）旋转：rotate（deg)
3）缩放：scale（x,y）倍数，1/2/3...0.5缩小
伪元素写结构时必须加content:””;
1》转换中心点：transform-origin:x y;（可以%，可以方位名词）

二、动画：animation
        1）先定义动画
                @keyframes+动画名字{0%-100%}
2）调用动画
Animation:name 时间；+其他
运动曲线：linear匀速
步长：steps()
循环播放：infinite
逆播放：alternate
动画暂停：animation-play-state:paused;
结束后:回到起始状态backwards/保持不动forwards;
三、3D转换
1）移动：translateX/Y/Z/3d(x,y.z)一般用px;
2）透视：perspective：px;写在被观察元素的父盒子上。
3）旋转：rotateX/Y/Z(deg)
4）3d呈现：transfrom-style写给父盒子，影响子盒子