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);
rotateY()
rotateY()
,函数定义了一个转换,它可以让一个元素围绕**纵坐标(垂直轴)**旋转,而不会对其进行变形。
transform: rotateY(45deg);
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);
translateZ()
translateZ()
,表示在三维的 Z 轴方向移动元素。translateZ(tz)
等同于 translate3d(0,0,tz)
。
scaleZ()
scaleZ()
,只对 Z 坐标进行缩放,scaleZ(sz)
等同于 scale3d(1, 1,sz)
,是一个缩写。
对比一下缩放前后的效果,感受 Z 轴的拉伸:
transform: scaleZ(1);
transform: scaleZ(1.4);
perspective 透视
perspective()
perspective
指定了观察者与 z=0
平面的距离,使具有三维位置变换的元素产生透视效果。 z>0
的三维元素比正常大,而 z<0
时则比正常小。
none
没有应用perspective
样式时的默认值.<length>
<length>
指定观察者距离z=0
平面的距离,为元素及其内容应用透视变换。当值为 0 或负值时,无透视变换。
perspective-origin
perspective-origin
指定了观察者的位置,