html文字旋转以后变形,关于css:CSS3中的变形处理transform功能旋转缩放倾斜移动

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)可通过矩阵执行多重变形解决

将须要的变形矩阵相乘失去一个新的变形矩阵可实现该解决。