变形：transform

位移：

2D：x轴 y轴
    translate(x偏移,y偏移): px 百分比(相对于自身的百分比)
    translateX
    translateY
3D：x轴 y轴 z轴
    translateZ  不常用
    要在父元素开启3D布局 transform-style:preserve-3d
旋转：角度旋转 单位：deg
缩放：scale

过度：transition

transition 过度样式 持续时间 速度曲线

动画：animation

1、设置关键帧 @keyframes
    关键帧：记录动画从开始位置到结束位置，中间各时段的样式
    至少有：开始位置(from 0%) 结束位置(to 100%)
    中间段：百分比
2、开启动画
    animation 关键帧名 持续时间 速度曲线 循环次数 是否反向

根元素动态计算

计算属性

calc()可以计算不同单位的长度，符号两端打空格

动态计算字体大小：

标准宽度390px 1rem 16px (初始开发时的效果)
公式：(100vw * 16) / 390 = x
font-size: scale((100vw * 16) / 390);