CSS2D转换

2D转换之移动translate

transform 可以实现元素的位移、旋转、缩放等效果。
设置转换中心点transform-origin：x y;
x y用空格隔开 x y 默认转换的中心点是元素的中心点
还可以给x y设置像素或者方位名词（top bottom left right center）

优点：
1. 不会影响其他元素的位置
2. 百分比是相对于自身元素的translate(50%,50%);
3. 对行内标签没有效果

• 移动：translate

transform：translate(x,y);
transform: translateX(n);
transform: translateY(n);

• 旋转：rotate

transform： rotate(45deg)；
//顺时针旋转45度
//默认旋转中心为元素中心
//正为顺时针，负为逆时针

• 缩放：scale

transform: scale(x,y);
//里面写的数字不跟单位，就是倍数的意思小于1缩放，大于1放大
//等比例缩放：scale(2);
// scale的优势：不会影响其他盒子，而且可以设置缩放的中心点

2D转换综合写法

1. 格式：transform：translate（）rotate（）scale（）…等。
2. 其顺序会影响转换的效果（先旋转会改变坐标轴方向）。
3. 当我们同时又位移和其他属性的时候记着将位移放在最前面。