3分钟看懂变换【transform】

1,116 阅读4分钟

前言

大家好,我是cv竹叶,我一直对:transition过度animation动画transform变换,这些属性摸不着头脑,就像是对初恋一样让人迷惑。

今天,我要用3分钟,就理解其中的transform变换

什么?你想看transition过度的理解?那就点这里 3分钟看懂过度【transition】

今天,我要用3分钟,就理解其中的transform变换属性

image.png

transform属性

transform就是变换位置或改变形状,都是围绕着x轴,y轴,z轴,默认中心点来进行变换的。

1629704388(1).jpg

transform属性值,可以移动、旋转、放大缩小,下面我们就来一一了解一下:

1、旋转

rotate(n deg)旋转,围绕中心点2D旋转n度,单位为deg。如果n中的值为正数则顺时针旋转,如果是负值则逆时针旋转,deg代表旋转角度

rotateX(n deg)旋转,以x轴为旋转中心,上下翻转n度。

rotateY(n deg)旋转,以y轴为旋转中心,左右翻转n度。

rotateZ(n deg)旋转,以z轴为旋转中心,平面翻转n度。相当于rotate(n deg)

rotate3d(x,y,z,n deg)3d旋转,其实是上面几个的结合旋转,同时对x、y、z轴进行旋转n度。旋转轴由一组 [x, y, z] 矢量定义,如果这些矢量被赋予非标准值,即3个坐标值的平方和不等于1时,它将会被内部隐式标准化。非标准矢量,例如空值和 [0, 0, 0],将会使旋转不起作用。(此处我也不太懂,欢迎补充)

3.gif

顺时针旋转30度:
transform: rotate(30deg);

逆时针旋转30度:
transform: rotate(-30deg);

上下翻转30度:
transform: rotateX(30deg);

左右翻转30度:
transform: rotateY(30deg);

同时对x、y、z轴旋转45度:
transform: rotate3d(1,1,1,45deg)

2、移动

translate(x,y)可传入两个参数,等同于translateX(x)、translateY(y)。

如果x是正值。则向右移动x。负值则向左移动x。

如果y是正值。则向下移动y。负值则向上移动y。

x、y可以是px值,也可以是%值。

translate(x,y)移动,盒子整体向x、y方向移动x、y大小距离。

translateX(x)移动,盒子整体向x方向移动x大小距离。

translateY(y)移动,盒子整体向y方向移动y大小距离。

4.gif

同时向x、y方向移动:
transform: translate(100px,120px);

只移动x方向,在原来的div宽度上,移动10%transform: translateX(10%);

只移动y方向,在原来的div高度上,移动10%transform: translateY(10%);

3、缩放

scale缩放,其实和translate移动及其相识,只是缩放的过程中心点是不会移动的。

缩放基数就是1,n是相对于1的多少倍:

  1. 如果n>1,则是放大n-1倍
  2. 如果n<1,则是缩小1-n倍

scale(n)缩放,同时对在x、y轴的大小进行缩放n倍。

scaleX(n)缩放,对在x轴的宽度进行缩放n倍。

scaleY(n)缩放,对在y轴的高度进行缩放n倍。

5.gif

x、y同时放大0.5倍:
transform: scale(1.5);

x、y同时缩小0.5倍:
transform: scale(0.5);

只在x缩小0.5倍:
transform: scaleX(0.5);

只在y放大0.5倍:
transform: scaleY(1.5);

4、扭曲(倾斜)

skew扭曲,其实是对x、y的拉伸。有效值在90度之内,大于90度就会向反方向拉伸。

skew(x deg,y deg)扭曲,向x、y轴进行拉伸盒子x、y度,达到扭曲效果。

skewX(x deg)扭曲,向x轴进行拉伸盒子x度,达到扭曲效果。

skewY(y deg)扭曲,向y轴进行拉伸盒子y度,达到扭曲效果。

6.gif

对x、y轴进行拉伸扭曲30度:
transform: skew(30deg,30deg);

对y轴进行拉伸扭曲30度:
transform: skewY(30deg);

对x轴进行拉伸扭曲30度:
transform: skewX(30deg);

还有matrix矩阵perspective元素距视图,这两个比较复杂,有兴趣的小伙伴可以查查!反正3分钟内看不懂的啦!

transform兼容性

根据canius,可以知道兼容性,ie8以下是不支持的

image.png

总结

变换可以让我们的模块移动起来、变形放大缩小,满足日常开发中页面样式的需求。如果有帮到你的话,求求点个赞吧!

image.png