这是我参与更文挑战的第14天，活动详情查看更文挑战

css中的2D变换可以帮助我们实现更多炫酷页面的效果，通过2D我们可以创建旋转，缩放的元素和界面，下面我们就来一起来看看它都有哪些用法。

2D

2D主要有以下四种函数

rotate 定义旋转的函数
scale 定义缩放的函数
skew 定义翻转的函数
translate 定义位移的函数

rotate()

定义元素顺时针旋转给定的角度，允许负值，元素将逆时针旋转，单位为角度deg（degree）。

.rotate{
    transform: rotate(30deg);
}

.rotate{
    transform: rotate(-30deg);
}

scale，scaleX和scaleY

根据给定的宽度（X 轴）和高度（Y 轴）参数，元素将进行缩放，单位为倍数。

scale

scale()的取值默认的值为1，当设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

可以为负数，表示旋转；

如：scale（2,2);表示元素将会按照原尺寸在x轴，y轴分别放大2倍，如果x,y缩放大小相同可以简写为scale（2)；

.scale{
    transform: scale(2,2)
}

注意，如果为负数，不是缩小，而是反转

.scale{
    transform: scale(-2,-2)
}

.scale{
    transform: scale(0.8,0.8)
}

scaleX

scaleX() 方法增加或减少元素的宽度。

.scale{
    transform: scaleX(0.8)
}

scaleY

scaleY() 方法增加或减少元素的高度。

.scale{
    transform: scaleY(0.8)
}

translate(X,Y)、translateX 和translateY

translate(X,Y)

参考自己的位置，沿X轴和Y轴同时平移

.translate{
    transform:translate(20px,20px);
}

注意：如果只写一个参数，只实现横向移动

translateX

向X轴平移，正数往右平移，负数，往左平移

.translate{
    transform:translateX(20px);
}

translateY

向Y轴平移，正数往下平移，负数，往上平移

.translate{
    transform:translateY(20px);
}

skew, skewX, 和skewY

skew

使元素沿 X 和 Y 轴倾斜给定角度。

.skew{
    transform: skew(20deg, 10deg);
}

注意：如果未指定第二个参数，则值为零，元素会沿 X 轴倾斜。

skewX

使元素沿 X 轴倾斜给定角度。

.skew{
    transform: skewX(30deg);
}

skewY

使元素沿 Y 轴倾斜给定角度。

.skew{
    transform: skewY(30deg);
}

matrix()组合使用

matrix() 方法把所有 2D 变换方法组合为一个。

matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

.matrix{
    transform: matrix(1, -0.3, 0, 1, 0, 0);
}

小可爱看完就点个赞再走吧！🤞🤞🤞

CSS之详解2D转换

2D