transform变形

CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性，在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix

transform ： none | <transform-function> [ <transform-function> ]*

transform中使用多个属性时却需要有空格隔开，可用于内联(inline)元素和块级(block)元素

rotate旋转

transform: rotate(30deg);

• 旋转是顺时针的
• 旋转之后元素仍占据原来位置，实际上所有的transform都是这样，缩放、位移等都不会改变元素占据的位置
• 元素旋转的的基点默认是中心，可以通过transform-origin属性改变

transform-origin的取值可以是top, bottom, left, right, center，百分数
这个值对其他变形都有用

translate位移

使元素平移

transform:translate(x,y);
transform:translate(200px,150px);

也可以只移动一个坐标

transform:translateX(100px);
transform:translateY(100px);

scale缩放

使元素缩放一定的比例，和translate类似，也有三个方法

1. scale(x,y)：使元素水平方向和垂直方向同时缩放
2. scaleX(x)：元素仅水平方向缩放
3. scaleY(y)：元素仅垂直方向缩放
   对scale只设置一个参数，一个相同的比列缩放两个方向

transform:scale(2, 0.5);
transform:scaleY(0.3);
transform:scaleY(2);
transform:scale(3);

skew扭曲

使元素扭曲一定的度数，和上面一样有三种方法

transform:skew(10deg, 20deg);
transform:skewX(10deg);
transform:skewY(10deg);
transform:skew(10deg);

扭曲方法

矩阵

以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵

matrix(<number>, <number>, <number>, <number>, <number>, <number>)