? ? 图形变换我们能看到的要么是2D的平面变换，还有就是3D的立体变换，当我们看到这些词的时候，“平移”，“旋转”，“拉伸” 这种都是输入2D变换的范畴，转换导致的结构那就是，位置，形状，尺寸等等的改变。
transform 英文意思“变形” 好像变形金刚也是这个单词我也记不清了，反正transform 就是表述了刚才做说那种2d的转换的几种情况。transform 被 safari chrome firefox ie10 支持，如果在ie下使用需要加上前缀-ms-
?
? ? 这种通常被称为平移就是沿着X Y 坐标，对图形进行移动，一种非常常用的转换
? ?
.tf_translate{
transform:translate(500px,500px);
}
? ?使用了这个css 那么就是把图像平移到X坐标500px Y左边500px 处
?
?
? ?旋转，图像是以图形的中心为轴的旋转，这个一定要清楚，如果想以指定坐标做旋转的话需要其他做法，
这种旋转是顺时针旋转，可是使用负数，就是逆时针旋转，数值后边请加上deg 这个单位不然是不会正确执行的
?
.tf_rotate{
transform:rotate(100deg);
}
?
?
? ?拉伸 沿着X Y 进行拉伸，scale（x,y）两个参数，当然也可以使用scaleX scaleY 进行单独拉伸。
?
.tf_scale{
transform:scale(1.5,1.5);
}
?
?
? ?歪斜，这个可能用到的不多，也是两个参数沿着X Y 轴的歪斜 skew(x,y),注意需要加deg 后缀
?
.tf_skew{
transform:skew(20deg,20deg);
}
?
?
? ? 这个是上述所有2d变换的汇总，matrix 有六个参数，分别控制平移，歪斜，旋转的所有属性。
.tf_matrix{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
?上边介绍了所有的2D变换情况，你可以吧这些css应用到你的图像上，会按照你设定值进行图形转换，但是只能看到图形准换的结果。
?
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
| ? | ? |
?
css 支持图形以3D的形式进行变换，下边介绍3d变换中用到的方法
在2D 变换中rotate() 这种直接加参数的方式是2d中沿着中心进行选择，3D中故名就是按照XYZ轴进行相应的变换，所以你可以看到肯对不可思议的效果。
?
以上所有的介绍都是图形变形，跟我们在网页上看到的很多效果不同，因为他们使用了很重要的一个属性就是css3中的过渡效果
下一篇介绍过过渡Transition
原文：http://zha-zi.iteye.com/blog/2218591