transform中的scale跟translate的使用问题总结

Posted 2023-05-06

参考技术A 比如，我有一个300*400的元素(并且该元素不支持使用width跟height)，

此时我需要对其进行放大，比如我们需要对其放大一倍，

然后又要保证其相对位置跟原来保持一致，此时就需要通过translate对其进行平移，使其回到原来的相对位置。

按照正常的计算方式，我们需要将其向右平移200，向下平移150才行，但是需要注意的是此处的translate的参数是translate(100, 75)因为在实际的平移过程中translate的值也会乘上你的scale中的参数。

所以在对scale之后的元素通过平移来实现到达某个位置时，translate中的参数为：实际平移值/scale的倍数。

transform

transform:none|rotate|scale|skew|translate|matrix;(以空格分开)

 

none:不进行转换；

 

rotate:旋转。正数是顺时针旋转，负数为逆时针旋转。如transform:rotate(45deg)；

 

scale：缩放。scale（x，y）水平，垂直同时缩放，scaleX（）仅水平缩放；scaleY（），仅垂直缩放。他是指放大或缩小多少倍来取值。

 

skew：扭曲。如transform:skew(30deg,10deg)，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

 

translate：移动。translate(x,y)水平方向和垂直方向同时移动，当值为负数时，反方向移动物体，其基点默认为元素 中心点，也可以根据transform-origin进行改变基点；translateX：只向x轴进行移动元素；translateY：只向Y轴进行移动元素

 

transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom，这个看上去有点像我们background-position设置一样；下面我列出他们相对应的写法：

1、top left | left top 等价于 0 0 | 0% 0%

2、top | top center | center top 等价于 50% 0

3、right top | top right 等价于 100% 0

4、left | left center | center left 等价于 0 50% | 0% 50%

5、center | center center 等价于 50% 50%（默认值）

6、right | right center | center right 等价于 100% 50%

7、bottom left | left bottom 等价于 0 100% | 0% 100%

8、bottom | bottom center | center bottom 等价于 50% 100%

9、bottom right | right bottom 等价于 100% 100%

其中 left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%而top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%;如果只取一个值，表示垂直方向值不变