【www.bbyears.com--php函数】
1，变换函数
translateX(x)：在水平方向移动元素，正值向右移动。translateY(y)：在垂直方向移动元素，正值向下移动。
translate(x,y)：在水平和垂直方向移动元素。
scaleX(x)：在水平方向缩放元素（1.0是原始大小）。使用负值会将元素绕y轴翻转，创建一个从右到左的镜像。
scaleY(y)：在垂直方向缩放元素（1.0是原始大小）。使用负值会将元素绕x轴翻转，创建一个从下到上的镜像。
scale(x,y)：在水平和垂直方向缩放元素。
rotate(angle)：围绕元素中心顺时针旋转。用负值则逆时针旋转。
skewX(angle)：在水平方向倾斜元素。上下边缘仍然水平，左右边缘倾斜。
skewY(angle)：在垂直方向倾斜元素。左右边缘不倾斜，上下边缘倾斜。
skew(x-angle,y-angle)：在水平和垂直方向倾斜。
matrix(n1,n2,n3,n4,n5,n6)：用矩阵乘法来变换元素（其他所有的变换都可以使用矩阵乘法来实现）。
2，变换
变换是一个强大的工具，可以移动、缩放、斜切和旋转元素，扭曲它的外观。要用 transform 属性即可实现变换。
（变换不会影响页面中的其他元素，也不会影响布局。比如通过变换放大某个元素，那么该元素会简单地覆盖相邻元素）
以如下图片为例：
（1）旋转元素及其内容
下面使用rotate()函数把元素围绕其中心点旋转了20度。
（2）连续使用多种变换效果
下面先把元素变成原来的1.2倍，再向右移动30个像素，然后又斜切了-15度。
.rotatedElement {
transform: scale(1.2) translateX(30px) skew(-15deg);
-ms-transform: scale(1.2) translateX(30px) skew(-15deg);
-webkit-transform: scale(1.2) translateX(30px) skew(-15deg);
}
（3）修改默认参照点。
一般变换是以元素的中心点为参照点的。可以通过在应用变换前用 transform-origin 属性来移动这个参照点。
比如：
transform-origin: 0% 0%; 表示左上角为参照点
transform-origin: 100% 0%; 表示右上角为参照点
transform-origin: 50% 200%; 表示参照点x坐标是元素水平方向的中间，y坐标是从上边缘向下两倍于元素高度的地方。
下面让元素围绕元素的左上角旋转45度：
.rotatedElement {
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
（4）移除所有的变换效果
要移除所有的变换效果，可将 transform 属性设置为 none
.rotatedElement {
transform: none;
-ms-transform: none;
-webkit-transform: none;
}
3，3D变换
除了在二维空间移动元素，CSS3还可以用3D变换在三维空间移动、旋转和弯曲元素。
具体样例可以查看这里：http://css3.bradshawenterprises.com/transforms/#css3dtransforms
4，使用变换的过渡
通常变换和过渡是组合使用的。比如下面以一个在线影集为例，当鼠标移动到图片上时，图片会旋转并放大。而鼠标离开时，图片又会收缩并回到原位。这些变换是有过渡效果的。
代码如下
