持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第决17天 transform2D转换有以下几种类型：translat（位移），scale（缩放），skew（旋转），rotate（旋转）
1,2D位移:translat
从上面的图中我们可以看出，div这个盒子原本是在右上角的位置，但是我们给它加了个2d位移translat，它就向x轴移动了50px，并且向y轴移动了40px。
transform: translateX（）盒子只沿X轴移动
transform: translateY（）盒子只沿Y轴移动
2，2D缩放：scale
盒子原来的模样，且鼠标未悬浮在盒子上：
鼠标悬浮在盒子上，图片缩放后的模样：
我们可以很明显的看出盒子的高度和宽度都变大了一倍，是因为我们给盒子加了个2d缩放的属性：transform: scale(2, 2);其中括号里面的第一个2代表盒子的宽度width，是之前 2倍 宽，括号里面的第二个2代表盒子的高度height，是之前2倍高。
如果transform: scale(2, 2)，那盒子会怎么样？接下来我们继续看下：
我们可以看出，当 transform: scale(1, 1)里面的数值都是1时，那么盒子的高度和宽度是不会变的，我们可以这样来理解scale(width乘以n, 宽度乘以n)，n可以是0.1，但是n不可是0或者负数，scale的值必须填写2个，否则无效
3，2d倾斜
为了看到更清楚，我把 transform: skew(20deg, 0deg)x轴的度数设置成20，y轴的度数暂时设置为0，我们能够看出它是左右倾斜，
当我们把transform: skew(20deg, 0deg)x轴的度数设置成0，y轴的度数暂时设置为20时，我们来看下图形的倾斜变化吧：
如果我们把transform: skew(20deg, 20deg)x轴的度数设置成20，y轴的度数暂时设置为20时，我们来看下图形的倾斜变化
我们可以清楚的看到，盒子的四个角都发生了倾斜变化。
4,2d旋转transform: rotate()
旋转的效果看起来和倾斜差不多，但是我们要注意，正方形旋转时，只需要设置一个值，并且旋转的这个角和边框产生的角度都是一样大的，而倾斜是不一样的。
