CSS2D转换

今天给大家带来的是css经常用到的属性，不管是元素旋转还是元素移动，都是用到了css3的transform属性，今天我们就来看看这个属性的用法。

2D转换

2D转换顾名思义就是在平面上做一些移动之类改变元素位置的操作。

transforms这个属性可以允许我们将元素移动，旋转，缩放，倾斜。下面我将从这四个方面来讲解这个属性。

1. 移动

translate这个属性可以让我们将元素在水平和垂直方向上移动，这个属性有两个值，第一个值是水平方向上的移动，第二个值是垂直方向上的移动。

div{
    transform: translate(100px, 100px);
}

注意：

1. 这个属性的值可以是负数，也可以是百分比，也可以是em，rem等单位。
2. 此种写法，第一个必须为水平(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度。

同样的此方法第一个参数代表的是水平方向上的倾斜，第二个参数代表的是垂直方向上的倾斜。

那么我们如何判断元素的倾斜方向呢？我们可以这样来判断：

1. 右手握紧伸出大指姆，大指姆指向该轴的正方向。
2. 若是旋转度数为正，那么旋转方向就是剩下四根手指的方向。
3. 若是旋转度数为负，那么旋转方向就是与四根手指相背的方向。

如果我们只想要朝着一个方向进行倾斜时，上面代码的参数需要将不需要倾斜的轴设置为0deg，为了方便我们可以这样写：

div{
    transform: skewX(45deg);
    transform: skewY(45deg);
}

5. 组合

如果我们按部就班的来写，那么我们就需要写很多行代码，这样就会显得很麻烦，所以我们可以将这些属性进行组合，这样就可以减少代码量。

我们可以将上面的属性进行组合，来实现我们想要的效果。

div{
    transform: translate(100px, 100px) rotate(45deg) scale(2, 2) skew(45deg, 45deg);
}

上面的代码表示将div元素进行平移、旋转、缩放、倾斜。