在CSS3 2D转换中,通过属性transform来使用tansform功能,能够实现 4中文字或图像的变形处理,分别是旋转、缩放、倾斜以及移动。
旋转
通过rotate()方法,元素顺时针旋转给定的角度,也可以是负值,元素将逆时针旋转。形如
<div>
transform:rotate(30deg);//用rotate(30deg)元素顺时针旋转30读。
</div>
缩放
使用scale()方法来实现文字会图像的缩放处理在参数中指定缩放倍率。形如scale(0.5)表示缩小一半。
也可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率。形如scale(0.5,2)表示水平方向缩小一半,垂直方向放大一倍。
倾斜
使用skew()方法实现文字或图像的倾斜处理,在参数中分别设置指定水平方向上的倾斜角度与垂直方向上的倾斜角度。形如skew(30deg,30deg)表示水平方向上倾斜30度,垂直方向上倾斜30度。
其中两个参数可以修改成只使用一个参数,省略另一个参数,在这种情况下,视为只在水平方向上进行倾斜,垂直方向上不进行倾斜。
移动
使用translate()方法实现文字或图像的移动处理,在参数中分别设置指定水平方向上的移动距离与垂直方向上的移动距离。