2D旋转transform有以下几个属性：
- translate(x轴,y轴)---根据x和y轴位置给定的参数，从当前位置移动
- rotate(30deg)---表示该元素顺时针旋转30度，可以是负数，这样就是逆时旋转
- scale(原宽的倍数，原高度的倍数)---该元素增加或减少的大小，取决于宽度和高度的参数
- skew(x轴水平方向倾斜，y轴垂直方向倾斜)---包含两个参数，分别时表示x轴和y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负数表示向相反方向倾斜
- matrix()---该方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能
该图作为所以2D转化得最初始效果
image.png
translate
translate(X,Y)
translateX(n)
translateY(n)
水平方向移动50px,垂直方向移动50px
image.png
transform: translate(50px,50px);
rotate
- 正数就是顺时针旋转，负数就是逆时针旋转
顺时针旋转60度
image.png
transform: rotate(60deg);
逆时针旋转30度
image.png
scale
scaleX(n)
scaleY(n)
内容会被压缩
如果参数输入的是负数，方向就会相反
宽度扩大2倍，高度缩小0.5倍
image.png
transform: scale(2,0.5);
输入负数的x轴和y轴
image.png
image.png
image.png
skew
skew(x,y)
skewX(n)
skewY(n)
水平方向和垂直方向的倾斜超过等于60度就看不到元素了
输入的是负数，说明的逆时针倾斜了
水平方向倾斜30度，垂直方向倾斜30度
image.png
transform: skew(30deg,30deg);
matrix
- 接收六个参数：旋转，缩放，平移，倾斜
image.png
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
