这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战
css 2D
css2D变换方法有位移、旋转、缩放和斜切。
// 2D 缩放
transform: scale(1)
// 2D 斜切
transform: skew(8deg)
// 2D 旋转
transform: rotate(10deg)
// 2D 位移
transform: translate(6, 7)
rotate
旋转的角度有4中单位：deg、grad、rad、turn，分别表示角度(degrees)、百分度(grads)、弧度(radians)、圈数(turns)。
百分度(grad)：一个梯度，也可以说是一个百分度1/400个整圈，所以100gads等于90deg，它也可以支持负值，表示逆时针方向旋转。
角度(deg)：范围是0-360，负值表示逆时针旋转，比如逆时针旋转90度可以用-90deg表示。
弧度(rad): 1弧度等于180/π， 1.5708rad相当于100gads也相当于90deg。
圈数(turn): 1圈等于360度，所以1turn等于360deg
scale
scale()表示缩放，支持x和y两个方向。
// 水平放大3倍，垂直缩小1/4
transform: scale(3, .25);
// 也可以分开写
transform: scaleX(3);
transform: scaleY(.25)
缩放变化不支持百分比值，仅仅支持数值，所以如果我们写成scale(155%, 45%)是无效的。但是缩放变化支持负值，实现垂直翻转效果transform: scaleY(-1),实现水平翻转效果transform: scaleX(-1), 如果我们想要水平缩放和垂直缩放的大小一样， 我们可以transform: scale(3)，这样表示元素在水平方向和垂直方向的尺寸放大2倍。
skew
skew()斜切和scale()缩放一样，也支持x和y两个方向：
// 水平斜切22度，垂直斜切缩33度
transform: skew(22deg, 33deg);
// 也可以分开写
transform: skewX(22deg);
transform: skewY(33deg);
transform
transform特征对2d和3d变换都可以使用，当我们无论使用transform什么属性值，这个元素盒模型和位置都不会有任何变化。但是我们需要注意的是元素应用transform变换后，可能因为某些原因还是会影响排版，主要是在触发滚动条的显示和隐藏情况下影响容器的可用尺寸。
对于内联元素无效
内敛元素是无法应用transform变换的，但是这里的内联元素不包括替换元素，而且不支持所有变换特性。
<span>不能变化的元素</span>
span {
transform: translateX(88px);
}
虽然此时span位移效果，但是我们可以通过两种方法来实现位移效果，第一种方法：使用相对定位来实现，第二种：给元素增加块级特性。
不同顺序会有不同效果，我们可以一次性应用多个不同的变换函数，但是我们需要注意即使这些变换内容一样，如果顺序不同效果也会不一样。
transform属性后还有一个不常用的特性变化，当我们创建层叠上下文时： 和opacity属性值不是1的元素类似，如果transform属性值不是none，则会创建一个新的层叠上下文。这个特性一般用于两个方面，第一个是：覆盖其他元素，第二个是限制z-index: -1的层级表现。
