携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

transform

CSS中transform属性可以使元素发生平移、旋转、缩放、倾斜。

常用的函数transform function有：

• 平移：translate(x, y)
• 旋转：rotate(deg)
• 缩放：scale(x, y)
• 倾斜：skew(deg, deg)

translate(平移)

移动translate有三种情况：

1.translate(x,y)水平方向和垂直方向均相对原来位置进行移动（是在X轴和Y轴的移动）；

• 仅写一个值时，设置x轴上的位移

• 书写两个值时，设置x轴和y轴上的位移

2.translateX(x)仅水平方向相对原来位置移动（在X轴移动）；

3.translateY(Y)仅垂直方向移动（在Y轴移动）

x、y取值类型有: 数字：100px 百分比：参照元素本身

rotate（旋转）

旋转：rotate(deg)

值的个数

一个值时，表示旋转的角度

值的类型：

deg：旋转的角度

正数为顺时针

负数为逆时针

注意：旋转的原点受transform-origin的影响

scale（缩放）

缩放scale也有三种情况：

注意：默认值是1（不缩放），比1大是放大，比1小是缩小。

1、scale(x,y) 在x轴和y轴上缩放，改变元素的宽度和高度。

如：transform:scale(2,1.5);

2、scaleX(n) 在x轴上进行缩放，改变元素的宽度。

如：transform:scaleX(2):

3、scaleY(n) 在y轴上进行缩放，改变元素的高度。

如：transform:scaleY(2):

值的个数：

仅写一个值时，设置x轴上的缩放

书写二个值时，设置x轴和y轴上的缩放

值的类型：

数字：

1：保持不变

2：放大一倍

0.5：缩小一半

百分比：不支持百分比

skew（倾斜）

旋转：skew(x, y)

值的个数

一个值时，表示x轴上的倾斜

二个值时，表示x轴和y轴上的倾斜

值的类型：

deg：旋转的角度

正数为顺时针

负数为逆时针

注意：旋转的原点受transform-origin的影响