沈阳网站制作易势最专业！

为网络而生

CSS 3的属性比如 border-radius 、 box-shadow 和 text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先进的浏览器中的使用开始出现增长的势头。它们(这些CSS属性)已经为用户创建更轻量的页面和更丰富的体验，而且它们可以优雅的降级。然而，这些只是CSS 3能为我们做的众多事情中的一小部分。

在本文中，我们将走的更远，看一看 变形(transformation)、转换(transition)和动画(animation)等更高级的CSS3技术。我们将涉及代码本身、浏览器支持以及一些可以正确地展示这些新属性是如何即提升你的设计又增强整体用户体验的例子。

CSS 变形(Transformation)

CSS transformation是W3C的一个草案。但当我第一次坐下来阅读 它的全部特性 以了解一些东西的时候，它并没有让我感到开窍。你可以想象的到，这个文档是用技术术语的撰写的，而且它更关注变形的图形(比如绘图)元素和矩阵。大一学习微积分之后就没有碰过矩阵了，我必须为本章节做很多好的旧浏览器测试以及猜测和检验。

在看完我能找到的每一个教程和大量的浏览器测试之后，我总结出一些大家都能从中获益的有用的关于CSS变形的信息。

transform

transform属性实现了一些可用 SVG 实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素——只需要一行CSS代码。

一些前卫设计的最大诟病就是文字不可选(必须要使用切图的方法实现)。当你熟练使用transform属性来控制文字的时候，这就不再是问题了，因为这是个纯CSS方法，所以元素内的文字会保持可选。这是CSS相对于使用图片(或背景图片)的一个巨大优势。

一些有趣而有用的变形功能：

• rotate
  Rotate(旋转)允许你通过传递一个度数值来转动一个对象。 

• scale
  Scale是一个缩放功能，可以让任一元素变的更大。它使用正数和负数以及小数作为参数。 

• translate
  Translate就是基于X和Y 坐标重新定位元素 

• skew
  顾名思义，skew就是要将对象倾斜，参数是度数 

• matrix
  transform支持矩阵变换，就是基于X和Y 坐标重新定位元素 

让我们更深入的了解每一个功能吧。

Rotate

transform属性有很多用法，其中一个就是translate(旋转)。translate就是基于角度转动一个对象并可用于内联元素和块级元素，它可以实现 很酷的效果 。

1
2
3
4
5

#nav{
	-webkit-transform: rotate(-90deg);
	-moz-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来说，聊胜于无吧。