共计 825 个字符，预计需要花费 3 分钟才能阅读完成。
转换（tarnsform），可以实现元素的位移、旋转、缩放等效果转换（transform）可以简单理解为变形
移动：translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
transform: translate(x, y);
/* 分开写 */
transform: translateX(x);
transform: translateY(y);定义为2D转换中的移动，沿着X和Y轴移动元素
translate 最大的优点：不会影响到其他元素的位置
translate 中的百分比单位是相对自身元素的 translate(-50%, -50%)，可以配合定位实现水平垂直居中
对行内标签没有效果
旋转：rotate
2D旋转指的是让元素在2维平面内顺时针或逆时针旋转
transform: rotate(度数deg);rotate 里面跟度数，单位是 deg 比如 rotate(45deg);
角度为正时，顺时针，负时，为逆时针
默认旋转点是中心点，是元素的中心点
设置旋转中心点 transform-origin
transform-origin: x y;注意后面的参数x和y用空格隔开
x y默认转换的中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top bottom left right center）
缩放：scale
顾名思义，可以放大缩小，只要给元素添加上了这个属性就能控制它放大还是缩小
transform: scale(x, y);注意其中x和y用逗号分隔，填数字不跟单位
transform: scale(1,1); 宽和高都放大一倍，相当于没有放大
transform: scale(2,2); 宽和高都放大2倍
transform: scale(2); 只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2, 2)
transform: scale(0.5, 0.5); 缩小
scale 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
