关于css3变形属性transform

transform翻译成汉语具有"变换"或者"改变"的意思。
通过此属性具有非常强大的功能，比如可以在2d中实现元素的位移、拉伸或者旋转等效果。
下面就让我们来说说transform在2d中能做到哪些改变吧。

2D变换，是在一个平面对元素进行的操作。 可以对元素进行水平或者垂直位移、旋转或者拉伸。
上图即为css3中2D坐标系

transform属性值分为四种分别是：
1、移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
2、缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；
3、旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
4、倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜。

一.位移（translate）
注意事项：x，y值均可为负数
1.水平移动：向右移动translateX(tx)和向左移动translateX(-tx)；
2.垂直移动：向下移动translateY(ty)和向上移动translateY(-ty);
3.对角移动：右下角移动translate(tx,ty)、右上角移动translate(tx,-ty)、左上角移动translate(-tx,-ty)和左下角移动translate(-tx,ty)

transform:translateX(200px);
transform:translateY(200px);
transform:translate(200px，200px);

二.缩放（scale）
注意事项：默认值为1，0.01到0.99之间的任何值， 都是使元素缩小；而任何大于或等于1.01的值，使元素放大。不可取负值。
•1.水平缩放：scaleX() 表示元素只在X轴（水平方向）缩放，其默认值是1。
•2.垂直缩放：scaleY() 表示元素只在Y轴（纵横方向）缩放，其默认值是１。
• 3.垂直水平一起缩放：scale(x,y)x表示水平方向缩放的倍数，y表示垂直方向缩放的倍数。

ransform:scaleX(2);
transform:scaleY(2);
transform:scale(2，2);

三.旋转（rotate）
注意事项：旋转的是一个度数（deg）正值为顺时针，负值为逆时针。
1.垂直旋转：rotateX()表示元素垂直旋转。
2.水平旋转：rotateY()表示水平垂直旋转。

transform:rotateX(60deg);
transform:rotateY(60deg);

四.倾斜（skew）
注意事项：使元素以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
1.一个参数时：skew（x）表示水平方向的倾斜角度；
2.两个参数时：skew（x，y）第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

transform:skew(30deg);
transform:skew(30deg,20deg);