图片、网页倾斜的效果
前言：
今天要用到的倾斜特效源自于CSS 3中的变形功能：transform，通过这个属性，你可以直接用CSS做出一个简单的动画，transform里面除了可以把区块倾斜以外，也可以做 到：位移、缩放、透视等多种效果，不过我们今天要讲的只有transform中的旋转，也就是倾斜
语法格式：
-webkit-transform: rotate(倾斜角度);
-moz-transform: rotate(倾斜角度);
-o-transform: rotate(倾斜角度);
建议要一次加入这三行，才可以让「几乎」所有的浏览器都支持，当然目前的话… IE核心的浏览器都还不能看到此功能。这些都是题外话，我们继续看代码：
- -webkit的那行是要给使用webkit核心的浏览器的语法，例如：Safari、Chrome等浏览器都是使用webkit
- -moz的那行则是要给Firefox或是其他使用Firefox作为核心的浏览器在用的语法
- -o的那行则是要给Opera使用的
「倾斜角度」的部份单位是deg，例如你要让img倾斜一度，则语法为：
-webkit-transform: roate(1deg);
不过IE浏览器也不是不能实倾斜的效果，可以使用Matrix滤镜，具体的使用方法可以参见：CSS3 transform旋转属性在IE浏览器里的实现，虽然不是原生支持transform属性，但相信随着IE9对标准的全面支持，这个日后将会改善。
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";
有一个demo，来自：www.iefans.net/wp-demo/css-Transforms.html 可以详细参看：
demo代码如下：
<code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>IE浏览器CSS transform旋转属性的演示</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<style type="text/css">
body {
font-family: "Arial", sans-serif;
}
#ptOfRef {
border: #000 solid 3px;
background: #6FF;
width: 204px;
height: 204px;
position: absolute;
top: 100px;
left: 100px;
}
#example {
position: absolute;
top: 100px;
left: 100px;
border: #09F solid 1px;
background: #F90;
font-weight: 900;
color: #FFF;
padding: 10px;
display: block;
width: 200px;
height: 200px;
margin-top: -1px;
margin-left: -1px;
transform: rotate(40deg);
-o-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)";
}
</style>
<!--[if IE]>
<style type="text/css">
#example {
top: 50px;
left: 50px;
}
</style>
<![endif]-->
</head>
<body>
<div id="ptOfRef"></div>
<div id="example"> 这是一个CSS旋转属性的演示 </div>
<a href="http://www.cnblogs.com/natureclove/">返回文章</a>
</body>
</html>
</code
