CSS2D转换
今天给大家带来的是css经常用到的属性，不管是元素旋转还是元素移动，都是用到了css3的transform属性，今天我们就来看看这个属性的用法。
2D转换
2D转换顾名思义就是在平面上做一些移动之类改变元素位置的操作。
transforms这个属性可以允许我们将元素移动，旋转，缩放，倾斜。下面我将从这四个方面来讲解这个属性。
1. 移动
translate这个属性可以让我们将元素在水平和垂直方向上移动，这个属性有两个值，第一个值是水平方向上的移动，第二个值是垂直方向上的移动。
div{ transform: translate(100px, 100px); } 复制代码
注意：
- 这个属性的值可以是负数，也可以是百分比，也可以是em，rem等单位。
- 此种写法，第一个必须为水平(x)方向上的移动，第二个必须为垂直方向(y)上的移动，如果只想移动一个方向，另一个方向上的值必须为0。
要是我们只想要移动一个方法，这样写难免有点麻烦，所以我们可以这样写：
div{ transform: translateX(100px); transform: translateY(100px); } 复制代码
这样我们就把水平方向和垂直方向上的移动分开了。分别进行设置。
2. 旋转
前面说了移动，接着我们就来说说如何将一个元素进行移动：
div{ transform: rotate(45deg); } 复制代码
这个rotate参数可以让我们将元素进行旋转，里面跟上我们需要旋转的度数，记得加上单位deg,注意：当旋转度数为正数时，表示顺时针旋转；当旋转度数为负数时，表示逆时针旋转。
3. 缩放
scale这个属性可以让我们将元素进行缩放，这个属性也有两个值，第一个值是水平方向上的缩放，第二个值是垂直方向上的缩放。
div{ transform: scale(2, 2); } 复制代码
注意：
- 当我们使用
scale时，里面传的两个参数，第一个代表将元素在水平方向(宽度)上进行缩放，第二个代表将元素在垂直方向(高度)上进行缩放。
同样：如果我们只想要缩放一个方向，我们可以这样写：
div{ transform: scaleX(2); transform: scaleY(2); } 复制代码
我们只需要在scale后面加上X或者Y就可以了。代表我们在水平方向缩放还是在垂直方向进行缩放。
4. 倾斜
skew()这个属性可以让我们将元素进行倾斜，这个属性也有两个值，第一个值是水平方向上的倾斜，第二个值是垂直方向上的倾斜。
div{ transform: skew(45deg, 45deg); } 复制代码
上面的代码表示将div元素在x轴上旋转45度，y轴上旋转45度。
同样的此方法第一个参数代表的是水平方向上的倾斜，第二个参数代表的是垂直方向上的倾斜。
那么我们如何判断元素的倾斜方向呢？我们可以这样来判断：
- 右手握紧伸出大指姆，大指姆指向该轴的正方向。
- 若是旋转度数为正，那么旋转方向就是剩下四根手指的方向。
- 若是旋转度数为负，那么旋转方向就是与四根手指相背的方向。
如果我们只想要朝着一个方向进行倾斜时，上面代码的参数需要将不需要倾斜的轴设置为0deg，为了方便我们可以这样写：
div{ transform: skewX(45deg); transform: skewY(45deg); } 复制代码
5. 组合
如果我们按部就班的来写，那么我们就需要写很多行代码，这样就会显得很麻烦，所以我们可以将这些属性进行组合，这样就可以减少代码量。
我们可以将上面的属性进行组合，来实现我们想要的效果。
div{ transform: translate(100px, 100px) rotate(45deg) scale(2, 2) skew(45deg, 45deg); } 复制代码
上面的代码表示将div元素进行平移、旋转、缩放、倾斜。
