任鸟飞专注于网页设计。

transform 本意是变换、改变的意思，在CSS3中transform包括三种含义，分别是rotate（旋转）、skew（扭曲）、scale（缩放）。

1. CSS3 transform – rotate（旋转）

.transform–rotate {
  -moz-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);}

2. CSS3 transform – skew（扭曲）

.transform–skew{
  -moz-transform: skew(-25deg);
  -webkit-transform: skew(-25deg);}

3. CSS3 transform – scale（缩放）

.transform–scale {
  -moz-transform: scale(0.5);
  -webkit-transform: scale(0.5);}

初始图片：

兼容性

兼容：Chrome、Firefox、Opera等。
不兼容：IE8以下版本

由于IE8以下版本不支持CSS3，要想实现上述的transform（转换）效果，须使用IE滤镜，代码如下：

<!--[if IE]>
<style>
.transform–rotate {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  right:-15px; top:5px;
}
</style>
<![endif]-->

rotation取值[0,1,2,3]，依次代表旋转 [0deg,90deg,180deg,270deg]，有关BasicImage滤镜的说明请参考 BasicImage filter。