浅谈 CSS3 新特性:transform 元素转换

1,203 阅读5分钟

transform

transform 属性允许你旋转,缩放,倾斜或平移给定元素。通过修改 CSS 视觉格式化模型的坐标空间来实现。

根据经验,内联盒子(display: inline)不生效。

该属性可以接受一个或多个 CSS 变换函数。我们按效果分成了 2D 和 3D,一一介绍。

transform-origin

transform-origin,更改一个元素变形的原点。默认值,center

  • 一个值: 必须是 <length><percentage>,或 left, center, right, top, bottom 关键字中的一个。
  • 两个值: 其中一个必须是<length><percentage>,或 left, center, right 关键字中的一个。 另一个必须是<length><percentage>,或 top, center, bottom 关键字中的一个。
  • 三个值: 前两个值和只有两个值时的用法相同。 第三个值必须是<length>。它始终代表 Z 轴偏移量。

2D 转换

translate() 平移

translate(),该函数在水平和/或垂直方向上重新定位元素。它的参数定义了元素在每个方向上的偏移量。

语法:

translate(<length-percentage> , <length-percentage>?)

参数的类型是 <length-percentage>,如果是百分比类型,则横坐标参数基于自身的宽,纵坐标参数基于自身的高。

  • 一个参数:代表横坐标,纵坐标默认为 0。
  • 两个参数:代表横坐标和纵坐标。
transform: translate(100px, 200px);

translateX()

translateX(),表示在二维平面上水平方向移动元素。translateX(tx) 等同于 translate(tx) 或者 translate(tx,0)

transform: translateX(200px);

translateY()

translateY(),表示在二维平面上垂直方向移动元素。translateY(ty) 等同于 translate(0,ty)

transform: translateY(200px);

rotate() 旋转

rotate(),该函数定义了一种将元素围绕一个定点(由 transform-origin 属性指定,默认为元素的中心)旋转而不变形的转换。

语法:

rotate(a)
  • 若角度(a)为正,则顺时针方向旋转
  • 若角度(a)为负,则逆时针方向旋转
  • 旋转 180 度,称为点反演
transform: rotate(45deg);

scale() 缩放

scale(),用于在二维平面上修改元素的大小(放大或缩小)。

语法:

scale(sx, sy?)
  • sx,表示缩放向量的横坐标。
  • sy,表示缩放向量的纵坐标。如果未设置,则默认值被设置为 sx,元素在保持原有比例缩放。

坐标值的大小:

  • [-1,1]:缩小
  • (-∞,-1),(1,∞):放大
  • 负数:进行像素点反射之后,再进行大小的修改。
transform: scale(2, 0.5);

scaleX()

scaleX(),只对横坐标进行缩放,scaleX(sx) 等同于 scale(sx, 1),是一个缩写。

transform: scaleX(2);

scaleY()

scaleY(),只对纵坐标进行缩放,scaleY(sx) 等同于 scale(1, sy),是一个缩写。

transform: scaleY(2);

skew() 倾斜

skew(),该函数定义了一个元素在二维平面上的 倾斜转换

这种转换是一种剪切映射(横切),它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离,进行成比例的值调整;因此,一个点离原点越远,其增加的值就越大。

语法:

skew(ax, ay?)
  • ax,沿横坐标扭曲元素的角度。
  • ay,沿纵坐标扭曲元素的角度。如果未定义,则其默认值为 0,导致纯水平倾斜。
transform: skew(40deg, 30deg);

skewX()

skewX(),二维平面上水平方向的倾斜。skewX(a) 相当于 skew(a)

transform: skewX(40deg);

skewY()

skewY(),二维平面上垂直方向的倾斜。skewY(a) 相当于 skew(1,a)

transform: skewY(40deg);

matrix()

matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。关于转换的最终参数是通过这个矩阵计算出来的。

语法:

matrix(a, b, c, d, tx, ty)

经过计算我们会发现,这六个值可以对应上:

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

3D 转换

rotate 旋转

rotateX()

rotateX(),函数定义了一个转换,它可以让一个元素围绕**横坐标(水平轴)**旋转,而不会对其进行变形。

  • 如果为正,则顺时针方向移动;
  • 如果为负,则逆时针方向移动。
transform: rotateX(45deg);

01.png

rotateY()

rotateY(),函数定义了一个转换,它可以让一个元素围绕**纵坐标(垂直轴)**旋转,而不会对其进行变形。

transform: rotateY(45deg);

02.png

rotateZ()

rotateZ() 让一个元素围绕横 Z 轴旋转,而不会对其进行变形,没错,rotateZ(a) 就相当于 rotate(a)

rotate3d()

rotate3d() 函数的旋转规则是:以坐标原点(根据 transform-origin 设定,默认为 (0,0,0) )为起始点,以 (x,y,z) 为终点的向量为轴,根据左手定则,选择 angle 角度。

语法:

rotate3d(x,y,z,angle)

(0,0,0)(1,1,1)的向量为轴,旋转 45 度:

transform: rotate3d(1, 1, 1, 45deg);

01.png

translateZ()

translateZ(),表示在三维的 Z 轴方向移动元素。translateZ(tz) 等同于 translate3d(0,0,tz)

scaleZ()

scaleZ(),只对 Z 坐标进行缩放,scaleZ(sz) 等同于 scale3d(1, 1,sz),是一个缩写。

对比一下缩放前后的效果,感受 Z 轴的拉伸:

transform: scaleZ(1);

01.png

transform: scaleZ(1.4);

02.png

perspective 透视

perspective()

perspective 指定了观察者与 z=0 平面的距离,使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大,而 z<0 时则比正常小。

01.png

  • none 没有应用 perspective 样式时的默认值.
  • <length> <length> 指定观察者距离 z=0 平面的距离,为元素及其内容应用透视变换。当值为 0 或负值时,无透视变换。

perspective-origin

perspective-origin 指定了观察者的位置,

01.png

浅谈 CSS3 新特性