CSS的二维变换

在CSS变换中，支持页面中平移、旋转、变形和缩放元素。变换改变的是元素所在的坐标系统，同时，我们可以使用它在视口的坐标来描述其位置，比如：距页面顶部200px，距页面左侧100px，这就是视口坐标系统。

1、旋转

.box {
  transform:  rotate(45deg);
}

当在变换的元素后面再应用一个margin-top: 20px会使得朝上的那个角往下方移动20像素吗？答案是：不会。因为旋转之后所在的整个局部坐标系统都会被旋转，包括外边距。旋转后的也不会妨碍其他页面的布局，但是变换的元素会影响页面的溢出，如果变换的元素超出设置了overflow属性的元素中，导致出现了滚动条，则变换后的元素会影响可滚动区域。

image.png

2、变换原点

默认情况下，变换是以元素边框盒子的中心作为原点，控制原点的属性叫transform-origin，比如：可以围绕距元素盒子上边和左边各10px的点来旋转元素。
transform-origin设有三个值：分别代表x，y，z。

image.png

如果只给了第一个值，则第二个默认的是关键字center。需要注意的是，给SVG元素应用transform-origin得到的结果完全不同，它默认的是以元素左上角旋转，而不是中心点。

3、平移

平移就是元素移动的位置，可以沿着一个轴平移，使用translateX()或者translateY()，也可以沿着两个轴平移，使用translate()，使用translate()函数时，要给它传入两个坐标值，分别代表x轴和y轴平移的距离。这两个值可以是任何长度值，像素，em，或者是百分比都可以，但是需要注意的是：百分比是相对元素自身大小，而不是包含的大小。

transform: translate(100%,0);

4、缩放与变形

scale()和skew()两个函数对应的函数体：scaleX()、scaleY()、skewX()、skewY()。
scale()函数两个参数，x以及y轴缩放的倍数。

transform: scale(2,2);

变形则是指的水平或者垂直方向平行的边发生相对位移，或者是偏移一定的角度。

x轴变形理解为水平线在元素变形后仍然保持水平，而垂直线则会发生倾斜。

transform: skewX(15deg);