介绍

在Web开发中，CSS的transform属性用于应用2D或3D转换到元素上。这些转换包括平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等，它们可以改变元素的形状、大小和位置，而不会影响页面上的其他元素。

常用函数：

1.平移（Translate）

介绍

在二维空间中，translate接受两个参数，分别表示沿着X轴和Y轴的移动距离。

代码

• translate(x,y): 将元素沿着X轴和Y轴平移。例如，transform: translate(50px, 100px); 会将元素向右移动50像素，向下移动100像素。
• translateX(x): 仅沿X轴平移。
• translateY(y): 仅沿Y轴平移。

举例

.example {transform: translate(50px, 100px); /* 在X轴上向右平移50px，Y轴上向下平移100px */
}

2.旋转（Rotate）

介绍

rotate接受一个角度值，以旋转元素。

代码

• rotate(angle): 按照指定的角度（以度为单位）旋转元素。例如，transform: rotate(45deg); 会将元素顺时针旋转45度。

举例

.element {transform: rotate(45deg);/* 将元素旋转45度 */
}

3.缩放（Scale）

介绍

scale接受两个参数，分别表示X轴和Y轴的缩放比例。

代码

• scale(x, y): 沿X轴和Y轴缩放元素。例如，transform: scale(2, 3); 会将元素在X轴方向缩放2倍，在Y轴方向缩放3倍。
• scaleX(x): 仅沿X轴缩放。
• scaleY(y): 仅沿Y轴缩放。

举例

.element {transform: scale(1.5, 2); /* 将元素在X轴上放大1.5倍，Y轴上放大2倍 */
}

4.倾斜（Skew）

介绍

skew接受两个角度参数，分别表示X轴和Y轴的倾斜度。

代码

• skew(x-angle, y-angle): 按照指定的角度倾斜元素。例如，transform: skew(30deg, 20deg); 会将元素在X轴方向倾斜30度，在Y轴方向倾斜20度。
• skewX(x-angle): 仅沿X轴倾斜。
• skewY(y-angle): 仅沿Y轴倾斜。

举例

.element {transform: skew(30deg, 20deg); /* 将元素在X轴上倾斜30度，Y轴上倾斜20度 */
}

5.矩阵变换（Matrix Transform）

介绍

通过一个六值矩阵定义2D变换。这是一个更高级的用法，能够组合上述所有变换。

代码

• matrix(a, b, c, d, e, f): 使用一个6个值的矩阵来进行复杂的变换操作。例如，transform: matrix(1, 0, 0, 1, 50, 100); 相当于 translate(50px, 100px)。

举例

.element {transform: matrix(1, 0.5, -0.5, 1, 100, 100); /* 复杂的矩阵变换 */
}

举例

如果想要将一个元素沿X轴平移100像素，沿Y轴平移50像素，并旋转30度，可以这样写：

.transformed-element {transform: translate(100px, 50px) rotate(30deg);
}

转换可以顺序应用，这意味着它们将按照指定的顺序执行。例如，在上面的例子中，元素首先平移，然后旋转。

拓展

转换通常用于动画和过渡，以创造动态的用户界面效果。例如，可以使用transform属性来制作一个元素在用户悬停时旋转的效果：

.element:hover {transform: rotate(45deg);transition: transform 0.3s ease-in-out;
}

在上面的例子中，当用户将鼠标悬停在.element上时，它将旋转45度，并且这个旋转效果将在0.3秒内平滑地过渡。

补充

transform属性对性能友好的一个重要原因是，它不会触发浏览器的重排（reflow）或重绘（repaint），因为它是在GPU上完成的，而不是在CPU上。这使得转换非常适合动画和交互式设计。