通过CSS3 transform: rotate做出图片、网页倾斜的效果

之前新闻曾报导，在手机版的Google网页里面搜索「倾斜」的话，得到的网页会往右边斜，这其实并不是很难做出来的效果，只要使用一行CSS语法就可以达到了，因为他已经是CSS 3的标准之一啰～ 目前来讲这个倾斜的CSS 3语法IE浏览器系列还不支持(包含IE9)，另外就是说使用的时候不是一行就能，而是要分成很多行，因为每种浏览器对应的语法都不太相同，需要针对不同的浏览器定义不同的代码，这点应该在日后会改善。

前言：

今天要用到的倾斜特效源自于CSS 3中的变形功能：transform，通过这个属性，你可以直接用CSS做出一个简单的动画，transform里面除了可以把区块倾斜以外，也可以做到：位移、缩放、透视等多种效果，不过我们今天要讲的只有transform中的旋转，也就是倾斜

语法格式：

-webkit-transform: rotate(倾斜角度); -moz-transform: rotate(倾斜角度); -o-transform: rotate(倾斜角度); 建议要一次加入这三行，才可以让「几乎」所有的浏览器都支持，当然目前的话… IE核心的浏览器都还不能看到此功能。不过IE浏览器也不是不能实倾斜的效果，可以使用Matrix滤镜，具体的使用方法可以参见：CSS3 transform旋转属性在IE浏览器里的实现，虽然不是原生支持transform属性，但相信随着IE9对标准的全面支持，这个日后将会改善。这些都是题外话，我们继续看代码：

• -webkit的那行是要给使用webkit核心的浏览器的语法，例如：Safari、Chrome等浏览器都是使用webkit
• -moz的那行则是要给Firefox或是其他使用Firefox作为核心的浏览器在用的语法
• -o的那行则是要给Opera使用的

「倾斜角度」的部份单位是deg，例如你要让img倾斜一度，则语法为： -webkit-transform: roate(1deg); 范例文档下载：Box.net ｜ 4Shared ｜ Google ｜ Dropbox

标签:CSS3transform倾斜IE Web