今天来介绍CSS3的一个神奇的属性——transform，它可以实现文字或图像的旋转、缩放、倾斜、移动四种类型的变形处理。

首先我们做一实例：

定义CSS——

#box {

width:100px;

height:60px;

background:#909;

margin:100px auto;

}

定义HTML——

<div id=”box”></div>

图示效果：

1、旋转，属性表达方法为transform:rotate(*)。Rotate是旋转的意思；括号里*值的形式是“数值”+“deg”，表示旋转的角度；旋转角度是按顺时针方向来计算的。（deg是CSS3的“Values and Units”模块中定义的一个角度单位。）

使用方法：如果想要将实例中的div旋转，只需要如下定义：
#box {transform:rotate(30deg);}

即可看到这样的效果：

2、缩放，属性表达方式为transform:scale(num,num)。Scale是按比例缩放的意思；两个num为数值，表示缩放倍率，举俩例子：“0.5”表示缩小50%，“2”表示放大1倍。这里两个num值分别表示水平方向和垂直方向，若只设置一个值，则表示两个方向取同值。

使用方法：如果想要将实例中的div放大1倍，只需要如下定义：
#box {transform:scale(2);}

即可看到这样的效果：

3、倾斜，属性表达方式为transform:skew(num,num)。Skew是使歪斜（扭曲）的意思；这里的num值为“数值”+“deg”的形式，表示指定的倾斜角度；同样的，两个num值分别表示水平方向的倾斜角度和垂直方向的倾斜角度，若只设置一个值，则表示两个方向取同值。
使用方法：如果想要将实例中的div水平倾斜30度垂直倾斜5度，只需要如下定义：
#box {transform:skew(30deg,5deg);}

即可看到这样的效果：

4、移动（非动画），属性表达方式为transform:translate(num,num)。Translate方法表示移动的意思，注意，不是我们看到的那种移动动画，而是处理一个移动结果。这里两个num值为像素值的形式，分别表示水平方向上的移动距离和垂直方向上的移动距离，这里需要注意了，若只设置一个值，则不再表示两个方向取同值，而是默认为只设置了水平方向的移动值。所以就算两个移动的值相等，也不能省略了。规范得来定义单一方向的写法应是

translateX(30px);//表示水平方向移动30px

translateY(30px);//表示垂直方向移动30px

使用方法：如果想要将实例中的div水平方向和垂直方向分别移动30px，只需要如下定义：#box {transform:translate(30px,30px);}

这个就不再展示效果了，你懂的。:P

关于transform属性，IE尚不支持，目前可支持的浏览器有：Chrome8+, FireFox4+, Opera10+,Safari3.1+。

★ 指定变形的基准点

大家动手做下实例会发现，transform方法在做以上四种变形时，都是以元素的中心点为基准点来进行的，这个是默认的处理方法。那我们能否改变这个基准点呢？

Sure，那么我们就顺便介绍下transform-orign属性，举个例子就明白怎么使用了：

transorm-origin:left top;表示基准点为元素的左上角。