转换( transform )是CSS 3中具有顛覆性的特征之一, 可以实现元素的位移、旋转、缩放等效果
转换( transform )你可以简单理解为变形
●移动: translate
●旋转: rotate
●缩放: scale
2D实际上是指二维坐标系，建立在二维坐标系上进行相关元素转换，通常配合hover利用transition来使用 2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。
1.语法
transform: translate(x,y); 或者分开写
t ransform: t ranslateX(n) ;
transform: t ranslateY(n) ;
2.重点
●定义2D转换中的移动,沿着X和Y轴移动元素
●translate最大的优点:不会影响到其他元素的位置
●translate中的百分比单位是相对于自身元素的translate:(50%,50%)（我们tranlate里面的参数是可以用%，里面的参数是%则移动的距离是盒子自身的宽度或者高度来对比的）;
●对行内标签没有效果
<style>div {width: 200px;height: 200px;background-color: pink;}p {display: inline-block;height: 100px;width: 100px;background-color: purple;margin: 50px;transition: all .5s ease 2s;}p:hover {width: 500px；分开写translateX Y属性时，X属性失效；可能兼容性存在问题/* transform: translate(-50px, -50px); *//* transform: translateY(-50px); */}</style>
</head><body><div><p></p></div><div></div>
</body></html>