乐趣区

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

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

退出移动版