通常使用CSS和HTML是不可能使HTML元素旋转或者倾斜一定角度的。为了使元素看起来更具有立体感，我们不得不把这种效果做成一个图片，这样就限制了很多动态的使用应用场景。Transform属性的引入使我们以前通常要借助SVG等矢量绘图手段才能实现的功能，只需要一个简单的CSS属性就能实现。在新增特性中Transform属性主要包括：otate旋转、Scale缩放、translate坐标平移、skew坐标倾斜、matrix矩阵变换。

目前支持形变的浏览器有Webkit系列浏览器、Firefox3.5＋、Opear10.5+,IE全系列不支持。

9．媒体查询

媒体查询（media queries）可以让你为不同的设备基于它们的能力定义不同的样式。如在可视区域小于400像素的时候，想让网站的侧栏显示在主内容的下边，这样它就不应该浮动并显示在右测了。实际样式图如下：http://www.zhiyuanit.com.cn/。上

这个属性是很有用的，因为不用再为不同的设备写独立的样式表了，而且也无须使用JS来确定每个用户的浏览器的属性和功能。

媒体查询被基于webkit核心的浏览器和opera支持，Firefox在3.5版本中支持它，IE目前不支持这些属性。

10. 新增特性线性渐变

渐变色是网页设计中很常用的一项元素，它可以增强网页元素的立体感，同时使单一颜色的页面看起来不是那么突兀。过去为了实现渐变色通常需要先制作一个渐变的图片，将它切割成很细

的一小片，然后使用背景重复使整个HTML元素拥有渐变的背景色。这样做有两个弊端：为了使用图片背景，很多时候使得本身简单的HTML结构变得复杂；受制于背景图片的长度或宽度，HTML元素不能灵活地动态调整大小。新增特性中Webkit和Mozilla对渐变都有强大的支持，

主流浏览器对CSS3的支持：

CSS3带来了众多全新的设计体验，但是并不是所有浏览器都完全支持它。当然，网页不需要在所有浏览器中看起来都严格一致，有时候在某个浏览器中使用私有属性来实现特定的效果是可行的。

下而介绍使用CSS3的注意事项。

l  CSS3的使用不应当影响页面在各个浏览器中的正常显示。可以使用CSS3的一些属性来增强页面表现力和用户体验，但是这个效果提升不应当影响其他浏览器用户正常访问该页面。

l  同一页面在不同浏览器中不必完全显示一致。功能较强的浏览器页面可以显示得更炫一些，而对较弱的浏览器只要能完成基本的功能就行。大可不必为了在各个浏览器中得到同样的现实效果而大费周折。

l  在不支持CSS3的浏览器中，可以使用替代方法来实现这些效果，但是需要平衡实现的复杂度和实现的性能之间的关系。