CSS：transform作用
transform作用
- 介绍
- 常用函数：
- 1.平移（Translate）
- 介绍
- 代码
- 举例
- 2.旋转（Rotate）
- 介绍
- 代码
- 举例
- 3.缩放（Scale）
- 介绍
- 代码
- 举例
- 4.倾斜（Skew）
- 介绍
- 代码
- 举例
- 5.矩阵变换（Matrix Transform）
- 介绍
- 代码
- 举例
- 举例
- 拓展
- 补充
介绍
在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上。这使得转换非常适合动画和交互式设计。