一些有趣而有用的变形功能:
rotate
Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
scale
Scale是一个缩放功能,可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
translate
Translate就是基于X和Y 坐标重新定位元素
skew
顾名思义,skew就是要将对象倾斜,参数是度数
matrix
transform支持矩阵变换,就是基于X和Y 坐标重新定位元素
让我们更深入的了解每一个功能吧。
Rotate
transform属性有很多用法,其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素,它可以实现很酷的效果。

CSS Code复制内容到剪贴板
#nav{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
请注意在IE8中(非标准模式)它需要你写成“-ms-filter”而不是“filter”。
浏览器支持
浏览器对translate的支持令人惊奇的广泛。在上面的CSS片段中,我们直接加上-webkit-和-moz-前缀然后将#nav元素旋转-90度。
相当简单吧?唯一的问题是对于一个相当重要的设计元素,如果IE不支持,很多设计师就会不情愿使用它。
幸运的是,IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值:0, 1, 2,和3。你将不会获得和Webkit和Gecko一样的精密控制,但是至少在一定程度上保持统一(甚至IE6)。虽然这个滤镜只支持4个值,显得有些鸡肋,但是对于IE来说,聊胜于无吧。
另外,非常值得一提的是,Opera在前几天发布了Opera 10.50 pre版本,声称支持CSS3 的transition和transform。只是还是需要使用私有属性,也就是要使用前缀 -o-
scale
scale并不像你想象的那样工作:简单的缩小和放大一个元素。缩放功能同时采用宽和高两个值,这些值可以是正数、负数和小数。
正数值放大一个元素,正如你期望的那样,基于指定的宽度和高度。
负数值并不会缩小元素,而是翻转它(比如,文字被反转)然后相应的缩放它。然而,你可以使用小于1的小数(例如.5)来收缩或者缩小一个元素。










