html文字旋转以后变形,CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）...

css3中的变形处理——transform功能(旋转、缩放、倾斜、移动)

标签： css3 变形处理 transform功能 个人分类： css3 1 transform属性

在css3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。

(1)支持

到目前为止：safari3.1以上、chrome8以上、firefox4以上、opera10以上浏览器支持该属性。

2 旋转

使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。

transform：rotate(45deg)；

3 缩放

使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。

transform：scale(0.5)；//缩小一半

(1)可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率

transform：scale(0.5，2)；//水平方向缩小一半，垂直方向放大一倍。

4 倾斜

使用skew方法实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。

transform：skew(30deg，30deg)；//水平方向上倾斜30度，垂直方向上倾斜30度。

(1)只使用一个参数，省略另一个参数

这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。

transform：skew(30deg)；

5 移动

使用translate方法来移动文字或图像，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。

transform：translate(50px，50px)；// 水平方向上移动50px，垂直方向上移动50px

(1)只使用一个参数，省略另一个参数

这种情况下视为只在水平方向上移动，垂直方向上不移动。

transform：translate(50px)；

6 对一个元素使用多种变形的方法

transform：translate(150px，200px) rotate(45deg) scale(1.5)；

7 指定变形的基准点

在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。

transform-origin属性

使用该属性，可以改变变形的基准点。

transform：rotate(45deg)；

transform-origin：left bottom；//把基准点修改为元素的左下角

(1)指定属性值

基准点在元素水平方向上的位置：left、center、right

基准点在元素垂直方向上的位置：top、center、bottom

8 3d变形功能

(1)旋转

分别使用rotatex方法、rotatey方法、rotatez方法使元素围绕x轴、y轴、z轴旋转，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。

transform：rotatex(45deg)；

transform：rotatey(45deg)；

transform：rotatez(45deg)；

transform：rotatex(45deg)rotatey(45deg)rotatez(45deg)；

transform：scale(0.5) rotatey(45deg)rotatez(45deg)；

(2)缩放

分别使用scalex方法、scaley方法、scalez方法使元素按x轴、y轴、z轴进行缩放，在参数中指定缩放倍率。

transform：scalex(0.5)；

transform：scaley(1)；

transform：scalez(2)；

transform：scalex(0.5)scaley(1)；

transform：scale(0.5) rotatey(45deg)；

(3)倾斜

分别使用skewx方法、skewy方法使元素在x轴、y轴上进行顺时针方向倾斜(无skewz方法)，在参数中指定倾斜的角度

transform：skewx(45deg)；

transform：skewy(45deg)；

(4)移动

分别使用translatex方法、translatey方法、translatez方法、使元素在x轴、y轴、z轴方向上进行移动，在参数中加入移动距离。

transform：translatex(50px);

transform：translatey(50px);

transform：translatez(50px);

9 变形矩阵

每种变形方法的背后都存在着一个对应的矩阵。

(1)计算2d变形(3 x 3矩阵)

可以将这个2d变形矩阵书写为matrim(a,b,c,d,e,f),a~f均代表一个数字，用于决定怎样执行变形处理。

(2)平移的2d矩阵

//效果一致：右移150px，下移150px

transform：matrix(1，0,0,1，150，150)；

transform：translate(150px，150px)；

(3)计算3d变形

3d缩放变形使用的4x4矩阵

transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

//效果一致：x轴方向上缩小五分之一，y轴方向上缩小一半。

transform:scale3d(0.8,0.5,1);

transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);

(4)可通过矩阵执行多重变形处理

将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。