1.2D变换移动——translatetranslate可以改变元素在页面上的位置，类似于定位，可以沿X轴和Y轴移动元素。translate最大的好处就是不会影响其他元素的位置。1.沿x轴移动/*沿x轴向右移动100px*/transform:translateX(100px);/*沿x轴向右移动自身宽度的50%*/transform:translateX(50%);2.y轴移动/*沿y轴向下移动50px*/transform:translateY(50px);/*沿y轴向下移动自身高度的50%*/transform:translateY(50%);3.同时沿x轴，y轴移动/*沿x轴向右移动100px，沿y轴向下移动50px*/transform:translate(100px,50px);/*沿x轴向右移动自身宽度的50%，沿y轴移动自身宽度的50%向下移动自身高度的50%*/transform:translate(50%,50%);二、2D变换的旋转——rotaterotate可以使元素在二维平面上顺时针或逆时针旋转。/*角度为正，顺时针旋转*/transform:rotate(45deg);/*角度为负，逆时针旋转*/transform:rotate(-45deg);我们可以使用transform-origin来设置元素变换的中心点。旋转时，默认旋转中心点为元素的中心点，即(50%,50%)。/*语法：*/transform-origin:xy;x,y可以设置为百分比，分别相对于元素的宽和高；x,y可以设置为具体的像素值；x,y可以设置为方向名词:topbottomleftrightcenter/*设置变换中心点为元素的左上角，顺时针旋转45度*/transform-origin:lefttop;变换：旋转（45度）；3.2D变换的缩放——scalescale可以控制元素放大或缩小。scale也可以在不影响其他框的情况下，设置变换中心点进行缩放。/*宽高放大2倍*/transform:scale(2,2);/*宽高放大相同倍数，只能写一个参数*/transform:scale(2);/*小于0的值是Shrink，宽高都缩小到原来的0.5*/transform:scale(0.5,0.5);4、2D变换的综合写法同时使用多个变换，格式为：transform:translate(100px,50px)rotate(45deg)scale(0.5);需要注意的是，多次变换的顺序会影响变换的效果。当我们同时有位移和其他属性的时候，记得把位移放在前面（因为第一次旋转会改变坐标轴的方向）。
