CSS3-transform

在css3中，可以利用transform功能来实现文字或图像的旋转rotate、缩放scale、倾斜skew、移动translate、矩阵变形matrix这几种类型的变形处理。

一、旋转rotate

rotate(<angle>) ：这个属性只有一个参数，单位为deg。如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg);

 

二、缩放scale

缩放scale分三种情况：

scale(x,y)     改变元素的宽度和高度，这个属性有两个参数，x表示宽度缩放的倍数，y表示高度缩放的倍数，y为可选参数，若y未提供，则默认取与第一个参数一样的值，即宽度和高度缩放相同的倍数;

scaleX(x)      改变元素的宽度;

scaleY(y)      改变元素的高度;

缩放中心基点为元素的中心位置，缩放基数为１，若其值大于１则元素放大，反之其值小于１则元素缩小。如：transform:scale(2);

 

三、倾斜skew

倾斜skew分三种情况：

skew(x-angle,y-angle)     沿x轴和y轴倾斜，这个属性有两个参数，x-angle表示水平方向倾斜的角度，y-angle表示垂直方向倾斜的角度，y-angle为可选参数，若y-angle未提供，则y＝０，即垂直方向无倾斜;

skewX(angle)      在水平方向倾斜元素;

skewY(angle)      在垂直方向倾斜元素;

如：transform:skew(30deg,10deg):

 

四、移动translate

移动translate分三种情况：

translate(x,y)     沿x轴和y轴移动，这个属性有两个参数，x表示水平方向的移动，y表示垂直方向的移动，y为可选参数，若y未提供，则y＝０，即垂直方向无移动;

translateX(x)      在水平方向移动元素;

translateY(y)      在垂直方向移动元素;

如：transform:translate(30px,50px):

 

五、矩阵变形matrix

matrix(n,n,n,n,n,n)　含有６个值的变形矩阵，基于水平方向和垂直方向重新定位元素。涉及到数学中的矩阵知识，较复杂暂不做深入学习。

transform-origin

transform-origin 就是变形基点，即元素回绕着那个变形基点进行旋转rotate、缩放scale、倾斜skew、移动translate、矩阵变形matrix这些操作。未设置transform-origin时，默认元素基点为其中心位置。

transform-origin:x,y　 该属性有两个参数，这两个参数可以是%,em,px等具体的值，Ｘ还可以是left,center,right，Ｙ还可以是top,center,bottom。如：transform-origin(25%,center)