transform

transform-origin:

设置对象以某个原点进行转换
50% 50%，效果等同于center center，就是以盒子的中心为原点进行转换。

transform

2D 平面取值：（平移translate，缩放scale，扭曲skew）
1. scale()：指定对象的2D scale（2D尺寸缩放）
2. rotate(): 指定对象的2D rotation（2D旋转），需先有 <transform-origin > 属性的定义
3. translate()：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

3D平面：（平移translate，旋转rotate，）
1. translate3d()：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴，参数不允许省略
2. rotate3d()：指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z，第4个参数表示旋转的角度，参数不允许省略

用例：
实现旋转的加载样式：

<div style="
        box-sizing: border-box;
        width: 26px;
        height: 26px;
        position: absolute;
        top: 13px;
        left: 15px;
        border-width: 3px;
        border-style: solid;
        border-color: rgba(51,54,58,0.4) transparent;
        border-radius: 13px;
        transform-origin: 50% 50% 0px;
        transform: rotate(360deg);
        transition:transform 700s linear;">
    </div>