如何在CSS中使用2D变换功能

摘录自Tiffany新书《CSS大师，第二版》

CSS变换功能赋予我们创造其他方法无法实现的效果和交互的能力。结合过渡和动画，我们可以创建旋转、舞动和缩放的元素和界面。特别是三维变换，可以模拟物理对象。本文将探讨二维变换函数（三维函数在此处介绍）。

主要有四种二维变换函数：旋转、缩放、倾斜和位移。另外六个函数允许我们沿单个维度变换元素：scaleX 和 scaleY；skewX 和 skewY；以及 translateX 和 translateY。

关键要点

• CSS中的四个主要二维变换函数是rotate、scale、skew和translate。这些函数使我们能够创建其他方法无法实现的效果和交互，包括旋转、舞动和缩放的元素和界面。
• rotate()函数围绕变换原点（transform-origin）按指定角度旋转元素。可以顺时针或逆时针旋转。scale函数可以增加或减少元素在X维度、Y维度或两者上的大小。translate函数按指定距离偏移元素的绘制位置与其布局位置的距离。
• 变换函数可以组合起来创建更复杂的变换。但是，应用这些函数的顺序很重要，因为它会显著改变结果。这是因为浏览器将每个函数的矩阵相乘以创建一个新矩阵。
• 最新版本的CSS变换规范向CSS添加了translate、rotate和scale属性。这些属性的工作方式与其对应的变换函数非常相似，但值是空格分隔的，而不是逗号分隔的。这允许从其他变换中单独管理旋转、平移或缩放变换。但是，对这些属性的浏览器支持仍然有限。

rotate()

旋转变换围绕变换原点（transform-origin）按指定角度旋转元素。使用rotate()可以顺时针（正角度值）或逆时针（负角度值）倾斜元素。其效果很像风车或风轮，如下所示。

rotate()函数接受角度单位的值。角度单位由CSS值和单位模块级别3定义。这些可能是deg（度）、rad（弧度）、grad（梯度）或turn单位。一次完整的旋转等于360deg、6.28rad、400grad或1turn。

除非进行动画或过渡，否则超过一次旋转的旋转值（例如，540deg或1.5turn）将根据其余值进行渲染。换句话说，540deg的渲染效果与180deg（540度减去360度）相同，1.5turn的渲染效果与.5turn（1.5 – 1）相同。但是，从0deg到540deg或从1turn到1.5turn的过渡或动画将使元素旋转一倍半。

二维缩放函数：scale、scaleX和scaleY

使用缩放函数，我们可以增加或减少元素在X维度（scaleX）、Y维度（scaleY）或两者（scale）上的渲染大小。缩放如下图所示，其中边框表示框的原始边界， 号表示其中心点。

每个缩放函数都接受一个乘数或因子作为其参数。这个乘数几乎可以是任何正数或负数。不支持百分比值。大于1的正乘数会增加元素的大小。例如，scale(1.5)将元素在X和Y方向上的大小增加1.5倍。介于0和1之间的正乘数将减小元素的大小。

小于0的值也会导致元素的大小缩放或减小，并创建反射（翻转）变换。

警告：使用scale(0)将导致元素消失，因为将数字乘以零的结果为零。

使用scale(1)创建恒等变换，这意味着它被绘制到屏幕上时就像没有应用缩放变换一样。使用scale(-1)不会改变元素的绘制大小，但负值将导致元素被反射。即使元素没有显示变换，它仍然会触发新的堆叠上下文和包含块。

可以使用scale函数分别缩放X和Y维度。只需传递两个参数：scale(1.5, 2)。第一个参数缩放X维度；第二个参数缩放Y维度。例如，我们可以使用scale(-1, 1)沿X轴单独反射一个对象。传递单个参数将按相同的因子缩放两个维度。

二维平移函数：translateX、translateY和translate

平移元素会按指定距离偏移其绘制位置与其布局位置的距离。与其他变换一样，平移元素不会改变其offsetLeft或offsetTop位置。但是，它会影响它在屏幕上的视觉位置。

每个二维平移函数（translateX、translateY和translate）都接受长度或百分比作为参数。长度单位包括像素（px）、em、rem和视口单位（vw和vh）。

translateX函数改变元素的水平渲染位置。如果元素距左侧0像素，则transform: transitionX(50px)将其渲染位置向其起始位置右侧移动50像素。类似地，translateY改变元素的垂直渲染位置。transform: transitionY(50px)的变换将元素垂直偏移50像素。

使用translate()，我们可以使用单个函数垂直和水平移动元素。它最多接受两个参数：X平移值和Y平移值。下图显示了具有translate(120%, -50px)变换值的元素的效果，其中左侧绿色正方形位于原始位置，右侧绿色正方形与其包含元素（虚线边框）水平平移120%和垂直平移-50px。

向translate传递单个参数等效于使用translateX；Y平移值将设置为0。使用translate()是更简洁的选择。应用translate(100px, 200px)等效于translateX(100px) translateY(200px)。

正平移值将元素移动到右侧（对于translateX）或向下（对于translateY）。负值将元素移动到左侧（translateX）或向上（translateY）。

平移对于将项目向左、向右、向上或向下移动特别有用。更新left、right、top和bottom属性的值会强制浏览器重新计算整个文档的布局信息。但是，变换是在计算布局之后计算的。它们会影响元素在屏幕上的显示位置，但不会影响其实际尺寸。是的，将文档布局和渲染视为单独的概念很奇怪，但在浏览器方面，它们确实是单独的。

变换属性可能会出现在您附近的浏览器中

最新版本的CSS变换规范向CSS添加了translate、rotate和scale属性。变换属性的工作方式与其对应的变换函数非常相似，但值是空格分隔的，而不是逗号分隔的。例如，我们可以使用rotate属性表达transform: rotate3d(1, 1, 1, 45deg)：rotate: 1 1 1 45deg。类似地，translate: 15% 10% 300px在视觉上与transform: translate3d(15%, 10%, 300px)相同，scale: 1.5 1.5 3与transform: scale3d(1.5, 1.5, 3)相同。使用这些属性，我们可以单独管理旋转、平移或缩放变换，而不是其他变换。

在撰写本文时，对变换属性的浏览器支持仍然非常稀疏。Chrome和Samsung Internet开箱即用地支持它们。在Firefox 60及更高版本中，支持隐藏在一个标志后面；访问about:config并将layout.css.individual-transform.enabled设置为true。

skew、skewX和skewY

倾斜变换会改变点之间的角度和距离，同时保持它们在同一平面上。倾斜变换也称为剪切变换，它们会扭曲元素的形状，如下所示，其中虚线表示元素的原始边界框。

倾斜函数（skew、skewX和skewY）接受大多数角度单位作为参数。度、梯度和弧度是倾斜函数的有效角度单位，而turn单位（也许很明显）不是。

skewX函数在X方向或水平方向上剪切元素（见下图）。它接受一个参数，该参数必须是角度单位。正值将元素向左移动，负值将元素向右移动。

类似地，skewY在Y方向或垂直方向上剪切元素。下图显示了transform: skewY(30deg)的效果。原点右侧的点将随着正值的增加而向下移动。负值将这些点向上移动。

这就引出了skew函数。skew函数需要一个参数，但最多可以接受两个参数。第一个参数在X方向上倾斜元素，第二个参数在Y方向上倾斜元素。如果只提供一个参数，则第二个值假定为零，使其等效于仅在X方向上倾斜。换句话说，skew(45deg)的渲染效果与skewX(45deg)相同。

当前变换矩阵

到目前为止，我们已经分别讨论了变换函数，但它们也可以组合起来。想要缩放和旋转对象吗？没问题：使用变换列表。例如：

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

这会产生如下所示的结果。

使用变换函数时，顺序很重要。这一点最好用图示说明，所以让我们来看一个例子来说明。以下CSS会倾斜和旋转一个元素：

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

它给出了如下所示的结果。

如果你先旋转元素，然后倾斜它会发生什么？

<code>.transformEl {
    transform:  rotate(45deg) skew(10deg, 15deg);
}</code>

效果（如下所示）大相径庭。

每个变换都有一个不同的当前变换矩阵，该矩阵由其变换函数的顺序创建。要完全理解原因，我们需要学习一些矩阵乘法。这也有助于我们理解matrix和matrix3d函数。

矩阵乘法和矩阵函数

矩阵是一个数字或表达式的数组，排列在一个矩形的行和列中。所有变换都可以使用4×4矩阵表示，如下所示。

此矩阵对应于matrix3d函数，该函数接受16个参数，每个参数对应于4×4矩阵的一个值。二维变换也可以使用3×3矩阵表示，如下所示。

此3×3矩阵对应于matrix变换函数。matrix()函数接受六个参数，每个参数对应于值a到f。

每个变换函数都可以使用矩阵和matrix或matrix3d函数来描述。下图显示了scale3d函数的4×4矩阵，其中sx、sy和sz分别是X、Y和Z维度的缩放因子。

当我们组合变换（例如transform: scale(2) translate(30px, 50px)）时，浏览器会将每个函数的矩阵相乘以创建一个新矩阵。这个新矩阵就是应用于元素的矩阵。

但是矩阵乘法就是这样：它不是可交换的。对于简单的值，3×2的乘积与2×3的乘积相同。但是，对于矩阵，A×B的乘积不一定与B×A的乘积相同。让我们来看一个例子。我们将计算transform: scale(2) translate(30px, 50px)的矩阵乘积。

我们的元素已按比例缩放了两倍，然后水平平移60像素，垂直平移100像素。我们也可以使用matrix函数表示此乘积：transform: matrix(2, 0, 0, 2, 60, 100)。现在让我们切换这些变换的顺序，即transform: translate(30px, 50px) scale(2)。结果如下所示。

请注意，我们的对象仍然按比例缩放了两倍，但在这里它水平平移了30像素，垂直平移了50像素。使用matrix函数表示，这是transform: matrix(2, 0, 0, 2, 30, 50)。

还值得注意的是，继承的变换函数与变换列表类似。每个子变换都乘以应用于其父级的任何变换。例如，考虑以下代码：

<code>.rotatescale {
    transform: rotate(45deg) scale(2);
}</code>

这与以下内容的渲染效果相同：

<code>.transformEl {
    transform: skew(10deg, 15deg) rotate(45deg);
}</code>

在这两种情况下，p元素的当前变换矩阵都是相同的。尽管我们到目前为止一直关注二维变换，但上述内容也适用于三维变换。第三维增加了深度的错觉。它还在新的函数和属性的形式下带来了一些额外的复杂性。

关于CSS中二维变换函数的常见问题

CSS中有哪些不同类型的二维变换函数？

CSS中有多种类型的二维变换函数。这些包括translate()、rotate()、scale()、skew()和matrix()。每个函数都允许您以不同的方式操作元素。例如，translate()函数将元素从其当前位置移动，而rotate()函数围绕给定点旋转元素。scale()函数更改元素的大小，skew()函数沿X轴和Y轴扭曲元素。matrix()函数将所有这些变换组合成一个。

如何在CSS中使用translate()函数？

CSS中的translate()函数用于将元素从其当前位置移动。它有两个参数：X轴值和Y轴值。例如，如果要将元素向右移动50像素，向下移动20像素，则可以使用以下代码：transform: translate(50px, 20px);。这将移动元素到新位置，而不会影响页面上其他元素的布局。

我可以在CSS中组合多个二维变换函数吗？

是的，您可以在CSS中组合多个二维变换函数。为此，只需在transform属性中列出每个函数，并用空格分隔即可。例如，如果您想将元素缩放至其两倍大小，然后将其旋转45度，则可以使用以下代码：transform: scale(2) rotate(45deg);。变换按列出的顺序应用。

CSS中matrix()函数的用途是什么？

CSS中的matrix()函数是一个非常强大的变换函数，允许您同时执行多个变换。它有六个参数，代表2×3矩阵的值。此矩阵用于执行缩放、旋转、倾斜和平移变换的组合。虽然它比其他变换函数更复杂，但它提供了对变换过程的高度控制。

CSS中skew()函数是如何工作的？

CSS中的skew()函数用于沿X轴和Y轴扭曲元素。它有两个参数：X轴的倾斜角度和Y轴的倾斜角度。例如，如果您想沿X轴将元素倾斜30度，沿Y轴倾斜20度，则可以使用以下代码：transform: skew(30deg, 20deg);。这将扭曲元素，产生一种倾斜效果。

我可以在CSS中对任何HTML元素使用二维变换函数吗？

是的，您可以在CSS中对任何HTML元素使用二维变换函数。这包括块级元素（如div）和内联元素（如span）。但是，请记住，变换的应用方式可能会因元素的类型及其在布局中的位置而异。

如果我不为CSS中的translate()函数指定单位会发生什么？

如果您不为CSS中的translate()函数指定单位，则这些值将被视为像素值。这意味着transform: translate(50, 20);等效于transform: translate(50px, 20px);。但是，通常最好始终指定单位，以确保清晰性和一致性。

如何在CSS中动画化二维变换？

您可以使用transition属性在CSS中动画化二维变换。此属性允许您指定过渡的持续时间、计时函数和延迟。例如，如果您想在2秒内动画化旋转，则可以使用以下代码：transition: transform 2s; transform: rotate(45deg);。这将在指定的持续时间内平滑地动画化旋转。

CSS中rotate()和skew()函数有什么区别？

CSS中的rotate()和skew()函数都以不同的方式操作元素。rotate()函数围绕给定点旋转元素，而skew()函数沿X轴和Y轴扭曲元素。这意味着rotate()会更改元素的方向，而skew()会更改元素的形状。

我可以在CSS中将二维变换函数与其他CSS属性一起使用吗？

是的，您可以在CSS中将二维变换函数与其他CSS属性一起使用。例如，您可以将transform属性与border-radius属性结合使用，以创建具有圆角的旋转元素。但是，请记住，应用属性的顺序会影响最终结果。

以上是如何在CSS中使用2D变换功能的详细内容。更多信息请关注PHP中文网其他相关文章！