CSS3之变形处理

在CSS3中，使用transform属性来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。

1. 旋转：通过在样式代码中使用”transform: rotate(45deg)”语句使元素顺时针旋转45度。deg是CSS3的”Values and Units”模块中定义的一个角度单位。
2. 缩放：通过scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。例如”transform: scale(0.5)”表示使该元素缩小50%。
3. 倾斜 ：通过skew来实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。例如”skew(30deg,30deg)”表示水平上倾斜30度，垂直方向上倾斜30度。另外skew方法中的两个参数可以修改成只使用一个参数，省略另一个参数（这种情况视为只在水平方向上进行倾斜，垂直方向上不倾斜）。
4. 移动：通过translate方法将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。例如”transform: translate(50px, 50px)”表示水平方向上移动50个像素，垂直方向上移动50个像素。另外translate方法中的两个参数可以修改成只使用一个参数，省略另一个参数(这种情况下视为只在水平方向上进行移动，垂直方向上不移动)。
5. 指定变形的基准点： 默认情况下，使用transform方法进行文字或图像的变形时，是以元素的中心为基准点的。使用transform-origin属性，可以改变变形的基准点。

需要注意的是 :

• 使用Firefox浏览器的时候，需要书写成”-moz-transform”。
• 使用Safari浏览器或Chrome浏览器的时候，需要书写成”-webkit-transform”。
• 使用Opera浏览器的时候，需要书写成”-o-transform”。