13、transform变形之 translate、translate3d、translateX、translateY、translateZ
坐标系统
要使用元素变形操作需要掌握坐标轴，然后通过改变不同坐标来控制元素的变形。
使用 transform 规则控制元素的变形操作，包括控制移动、旋转、倾斜、3D转换等，下面会详细介绍每一个知识点。
下面是CSS提供的变形动作。
重要：
选项 说明
当 translate设置为百分比时，其参照是当前div的宽高
重复设置变形操作时只在原形态上操作。
下面设置了两次移动，并不会移动 550px 而是只移动50px。
行级元素不产生变形效果，将其转为 inline-block 或 block 以及弹性元素时都可以产生变化效果。
鼠标移动上后发生改变。
image-20190902133840698
article div:nth-child(2):hover {
transform: rotate(180deg);
}
以下操作变化时间为零秒，通过掌握后面的过渡动画可以控制变化时间。
沿X轴移动时正值向右移动、负值向左移动
沿Y轴移动时正值向下移动、负值向上移动
如果使用百分数将控制元素的原尺寸计算百分比然后移动
可同时设置多个值，解析器会从左向右依次执行
变形是在原基础上更改，即第二次设置值时不是在第一次值上变化
正值向右移动、负值向左移动。
正值向下移动、负值向上移动。
article div:nth-child(2) {
transform: translateY(100px);
}
使用 translate 可以控制按X、Y同时移动操作，第一个值控制X移动，第二个值控制Y移动。
元素宽度为100px设置50%时将移动50px，即百分比是指元素的尺寸的百分比。
居中可以使用多种方式，如弹性布局、定位操作，下面来看使用移动操作居中。
控制Z轴移动，正数向外、负数向里移动。因为Z轴是透视轴没有像X/Y一样的固定尺寸，所以不能使用百分数。
用于同时控制X/Y/Z轴的移动，三个值必须输入如果某个轴不需要移动时设置为零。
下面是使用移动效果制作的页面切换效果。
