在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
一、旋转rotate
rotate(<angle>):通过指定的角度参数对原元素指定一个2D旋转，需要有transform-origin属性的定义。transform-origin是旋转的基地，
angle是指旋转的角度，顺时针表示整数逆时针表示负数。transform-origin可以通过百分比来定位(右上角 100% 0)
二、移动translate
移动translate 分为三中情况：translate(x,y) 水平方向和垂直方向同时移动（也就是x与y同时移动），translateX(x)仅水平方向移动X轴；
translateY(y)仅垂直方向移动。
三、缩放scale
缩放scale和移动translate是极其相似，他也具有三中情况：scale(x,y)使用元素水平方向和垂直方向同时缩放（也就是x轴和y轴同时缩放）;scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就是放大，反之其值小于1，元素缩小，三种情况使用方法：
1、scale 指定两个参数，如果第二个参数未提供，则取与第一个参数一样的值。scale(X,Y)是用于对元素进行缩放，可以通过transform-origin对元素的基点进行设置，同样基点在元素中心位置；基中X表示水平方向缩放的倍数，Y表示垂直方向缩放的倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
2、scaleX。scaleX表示元素只在X粥（水平方向）缩放元素，他的默认值是（1,1）其点一样在元素的中心位置，同样是通过transform-origin来改变元素的基点。transform:scaleX(2)
3、scaleY 表示元素只在Y轴缩放元素，其基点同样是在元素中心位置，同样是通过transform-origin来改变元素的基点。
四、扭曲skew
扭曲skew和translate、scale一样同样具有三中情况；skew(x,y)使元素在水平和垂直方向同时扭曲；skewX(x)仅使元素在水平方向扭曲变形；skewY(y)仅使元素在垂直方向扭曲 变形。
1、skew(angle[,<angle>]) x轴y轴上的 skew transformation（斜切变换）.第一个个参数对应x轴，第二个参数对应Y轴，如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
transform:rotate(45deg) scale(0.8,1.2) skew(60deg,-30deg);
