大家都知道css画0.5px线条重点是设置宽200%，高1px后使用transform:scale(0.5,0.5)使得线条宽高各缩小0.5倍。但这还没完，要想画出来的线条位置不出现意外偏移，很多时候还需要配合transform-origin这个属性一起使用。（即添上transform-origin:left top）
transform-origin：表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处。
按照水平和垂直两个方向划分：水平和垂直方向各三种，按照排列组合最多可产生九种排列组合，即有九个位置。
水平：left|center|right(0% 50% 100%)
垂直：top|center|bottom(0% 50% 100%)
transform-origin属性若只设置一个值，可为left, center, right, top, bottom关键字中的一个
两个值：水平 垂直
三个值：水平 垂直 Z轴偏移量
以rotate（）为例：transform-origin设置位置不同，其所围绕的中心点就不同，经旋转后得到的图案自然不一致，可看下图扑克牌
