CSS：transform作用

介绍

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

在二维空间中，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 */
}

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

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

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

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

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

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度 */
}

通过一个六值矩阵定义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上。这使得转换非常适合动画和交互式设计。