一、2D转换之挪动 —— translate
translate 能够扭转元素在页面中的地位，相似定位，能够沿着 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% */ transform: translate(50%, 50%);二、2D转换之旋转 —— rotate
rotate 能够让元素在二维立体内顺时针或者逆时针旋转。
/* 角度为正，顺时针旋转 */ transform: rotate(45deg); /* 角度为负，逆时针旋转 */ transform: rotate(-45deg);咱们能够用 transform-origin 来设置 元素转换的中心点。 在旋转时，默认的旋转中心点是元素的中心点，也就是 (50%, 50%)。
/* 语法：*/ transform-origin: x y;- x 、y 能够设置为百分数，别离绝对于元素的宽度和高度；
- x 、y 能够设置为具体的像素值；
- x 、y 能够设置为方位名词：top bottom left right center
/* 将转换中心点设置为元素左上角，并顺时针旋转45度 */ transform-origin: left top; transform: rotate(45deg);三、2D转换之缩放 —— scale
scale 能够管制元素放大或放大。scale 也能够设置转换中心点进行缩放，并且不影响其余盒子。
/* 宽和高都放大 2 倍 */ transform: scale(2, 2); /* 宽和高都放大雷同倍数，能够只写一个参数 */ transform: scale(2); /* 值小于 0 是放大，宽和高都放大为原来的 0.5 */ transform: scale(0.5, 0.5);四、2D 转换的综合写法
同时应用多个转换，格局为：
transform: translate(100px, 50px) rotate(45deg) scale(0.5);须要留神的是：多个转换的程序会影响转换的成果，当咱们同时有位移和其余属性的时候，记得要将位移放到最后面（因为先旋转会扭转坐标轴方向）。