CSS3转换

 一、2D转换

1、css3 rotate()旋转

　　通过指定的角度参数对原元素指定一个2D rotation（2D 旋转）

　　语法：

　　　　transform:rotate(<angle>);

 　举个栗子：

　　　　transform:rotate(10deg);  //deg:角度

　　　　transform:rotate(-10deg);

　　参数说明：

　　　　angle指旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。

2、css3 translate() 平移

　　　　translate()方法,根据左（x轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动

　　　　translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）。

　　语法：

　　　1、　translatX(<translation-value>)

　　　　　　通过给定一个X方向上的数目指定一个translation。

　　　　　　transform:translateX(<translation-value>);

　　　　举个栗子：

　　　　　　transform:translateX(200px);

　　　　　　transform:translateX(50%);

　　　2、　translatY(<translation-value>)

　　　　　　通过给定一个Y方向上的数目指定一个translation。

　　　　　　transform:translateY(<translation-value>);

　　　　举个栗子：

　　　　　　transform:translateY(200px);

　　　　　　transform:translateY(50%);

　　3、translate(<translation-value>[,<translation-value>])

　　　　通过矢量[tx,ty]指定一个2D translation,tx是第一个过渡值参数，ty是第二个过度值参数选项。

　　　　　　transform:translate(<translation-value>[,<translation-value>]);

　　　　举个栗子：

　　　　　transform:translate(200px,100px);

3、css3 scale() 缩放

　　　　scale()方法，指定对象的2D scale(2D缩放)。

　　　　三种情况:

　　　　1、scaleX(x)元素仅水平方向缩放（x轴缩放）；

　　　　　　scaleX(<number>)

　　　　　　使用[sx,1]缩放矢量执行缩放操作，sx为所需参数。

　　　　　语法：

　　　　　　transform:scaleX(<number>);

　　　　　举个栗子：

　　　　　  　transform:scaleX(0.5);

　　　　　　　transform:scaleX(50%);

　　　　2、scaleY(y)元素仅水平方向缩放（y轴缩放）；

　　　　　　scaleY(<number>)

　　　　　　使用[sy,1]缩放矢量执行缩放操作，sy为所需参数。

　　　　　语法：

　　　　　　transform:scaleY(<number>);

　　　　　举个栗子：

　　　　　  　transform:scaleY(0.5);

　　　　　　　transform:scaleY(50%);

　　　　3、scale(x,y)使元素水平方向和垂直方向同时缩放（x轴和y轴同时缩放）；

　　　　　　　transform:scale(0.5,0.5);

　　　　　　　transform:scale(50%，50%);

4、css3 skew() 扭曲或斜切

　　　　skew方法，指定对象skew transformation（斜切扭曲）。

　　三种情况：

　　　　skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；

　　　　　　　transform:skewX(10deg);

　　　　　　　transform:skewX(-10deg);

　　　　skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）；

　　　　　　　transform:skewY(10deg);

　　　　　　　transform:skewY(-10deg);

　　　　skew(x,y)使元素在水平和垂直方向同时扭曲变形（X轴和Y轴扭曲变形）；

5、css3 matrix() 矩阵或混合

　　　　以一个含六值的（a,b,c,d,e,f）变换矩阵的形式指定一个2D变换。

　　　　相当于直接应用一个[a,b,c,d,e,f]变换矩阵。

　　语法：

　　　　transform:matrix(a,c,b,d,tx,ty);

　　　参数说明：

　　　　tx,ty就是基于x和y坐标重新定位元素。

二、3D转换

1、css3 rotate3D()旋转

　　旋转rotateX

　　　　rottateX方法指定对象在X轴上的旋转角度

　　语法：

　　　　transform:rotateX(angle);

　　参数说明

　　　　angle表示旋转的角度。

　　举个栗子：

　　　　transform:rotateX(50deg);

　　旋转rotate

　　　transform:rotate3d(x,y,z,angle);

　　

2、css3 translate3D() 平移

　　移动translateZ

　　　　translateZ方法指定对象Z轴平移。

　　语法：

　　　　transform:translateZ(z);

　　　移动translate3D

　　　　translate方法指定对象3D位移

　　语法：

　　　　transform:translate3d(x,y,z);

3、css3 scale3D() 缩放

　　缩放scaleZ

　　　　scaleZ方法指定对象的z轴缩放。

　　语法：

　　　　transform:scaleZ(z);

　　缩放scale3d

　　　scale3d方法指定对象3D位移

　　语法：

　　　　transform:scale3d(x,y,z);

4、css3 matrix3D() 矩阵或混合

　　matrix3D方法以一个4*4矩阵的形式指定一个3D变换。

　　语法：

　　　　transform:matrix3d(sx,n,n,n,n,sz,n,n,n,n,sz,n,n,n,n,1);

　　参数说明：

　　　　使用16个值的4*4矩阵。

　　

5、CSS3 perspective()