CSS 在您可以修改的内容方面非常强大，并且该transform属性是最通用和最强大的 CSS 属性之一。在本文中，我将介绍使用transform属性修改 CSS 元素的所有方法。

什么是变换属性？

CSS 中的transform属性只是一种您可以在一个属性中旋转、缩放、移动等元素的方式。由于这种灵活性，如果起初使用起来可能会令人困惑，但本文将消除所有这些困惑。

.class {
  transform: rotate(90deg) scale(2) translate(100px, 200px);
}

transform通过组合多个变换函数来获得所需的输出，因此为了理解transform您需要了解每个transform函数。

rotate

可能最容易理解的变换函数是rotate. 此函数采用单个参数，即旋转元素的角度。正值将导致顺时针旋转，负值将导致逆时针旋转。

.red {
  transform: rotate(10deg);
}
.green {
  transform: rotate(-45deg);
}
.blue {
  transform: rotate(.25turn);
}

正如您在上面的示例中看到的，我们使用deg和turn单位来定义我们的旋转。deg单位从 0 到 360，而turn单位从 0 到 1。

3D 旋转

rotateX您还可以使用、rotateY和rotateZ函数进行 3D 旋转。该rotateZ功能的工作原理与rotate.

rotateX将在水平轴上rotateY旋转一个元素，并将在垂直轴上旋转一个元素。这些可用于翻转元素。

.red {
  transform: rotateX(60deg);
}
.green {
  transform: rotateY(60deg);
}
.blue {
  transform: rotateX(.2turn) rotateY(.2turn);
}

如您所见，我们在 3D 空间中旋转元素，使其看起来被挤压。这种旋转实际上只在处理 3D 元素时才有用。

scale

scale是另一个很容易理解的函数。它可以采用一个或两个参数来确定元素大小的缩放比例。大于 1 的数字会使元素变大，而小于 1 的数字会缩小元素。

.red {
  transform: scale(1.25);
}
.green {
  transform: scale(.5);
}
.blue {
  transform: scale(1.25, .75);
}

当一个参数被传递给scale它时，它会根据传递的数字缩放 X 和 Y 轴相同的量。当两个值传递给scale第一个数字时，将缩放 X 轴，第二个数字将缩放 Y 轴。

此外，如果您愿意，可以使用scaleXandscaleY函数来缩放 X 或 Y 轴。这些函数采用一个参数并在相应轴上缩放元素。

3D 比例

就像rotate您可以在 3D 中缩放一样。为此，您将使用与 and 类似的函数scaleZ，但用于 Z 轴。这同样只对 3D 元素有用。scaleX``scaleY

translate

可能我最喜欢的转换元素的方法是使用translate函数。这个函数像scale函数一样接受一个或两个参数，并将根据提供的值移动一个元素。

.red {
  transform: translate(25px);
}
.green {
  transform: translate(-25px, 25px);
}
.blue {
  transform: translate(0, -25px);
}

透明的彩色箭头表示形状通常放置的位置，而不透明的箭头表示它们在平移后的位置。

你会注意到，当只有一个值被传递给它时，translate它只会影响 X 轴，因此元素向右移动 25 个像素，因为它是一个正值。

当将两个值传递给translate第一个值时，会在 X 轴上移动元素，而第二个值会影响 Y 轴的位置。这意味着绿色箭头向左移动 25 个像素，向下移动 25 个像素。正 Y 值将元素向下移动似乎令人困惑，因为我们通常认为正 Y 意味着向上，但在 Web 开发中，正 Y 值意味着元素在页面中向下移动。

最后，蓝色箭头向上移动了 25 个像素，因为第一个参数设置为 0，第二个参数设置为负 25 个像素。

就像 scale 一样，有一个translateX和translateY函数可以一次只在一个方向上移动一个元素。

百分比translate

该translate属性处理百分比的方式与几乎所有其他 CSS 属性不同，因为它基于元素的大小而不是其父级的大小。

.red {
  transform: translate(100%);
}

正如你所看到的，当我们用百分比平移时，我们将元素向右移动了其自身宽度的 100%。这对于通过将元素移动其自身宽度的 50% 或将元素彼此偏移其大小的百分比来使元素居中非常有用。

3D translate

您现在可能已经猜到了，但translate也可以在 3D 中使用。您可以使用translateZ仅修改 Z 轴的函数或translate3D类似 的函数translate，但接受第三个参数来在 Z 轴上移动元素。同样，这仅对 3D 元素有用。

偏斜

可能所有transform功能中最没用的是skew. 它允许您通过倾斜形状的边缘来拉伸形状。该skew函数接受一两个参数，就像translate.

.red {
  transform: skew(25deg);
}
.green {
  transform: skew(15deg, 25deg);
}
.blue {
  transform: skew(-15deg, -25deg);
}

如您所见，skew 属性在 X 和 Y 方向上拉伸了我们的形状。通过指定一个参数，我们只在 X 方向上倾斜，而如果我们传递两个属性，第一个在 X 方向上倾斜，第二个在 Y 方向上倾斜。

此外，就像translate您可以使用skewX和skewY在一个方向上倾斜元素而不影响其他方向一样。

3D 倾斜

不同的是，所有其他transform属性skew都没有任何 3D 版本。

组合变换

到目前为止，我们已经讨论了单独使用转换，但是如果您想使用多个转换怎么办？这实际上非常简单，因为您可以传递任意数量的函数transform。

.red {
  transform: rotate(25deg) scale(.5) translateX(50px);
}
.green {
  transform: rotate(-.5turn) translateX(-10%);
}
.blue {
  transform: scaleX(1.2) scaleY(.8);
}

组合转换变得困难的唯一时候是当您想要在不同的类中修改它们时。

.base-class {
  transform: scale(1.2) translateX(5px);
}
.big {
  transform: scale(2) translateX(5px);
}
.move {
  transform: scale(1.2) translateX(100px);
}
.big.move {
  transform: scale(2) translateX(100px);
}

由于transform是一个属性，您需要在修改的每个类之间复制所有值，transform因为如果您只是transform: scale(2)在.big类中写入，它将覆盖整个transform而不只是scale部分。幸运的是，我们可以巧妙地使用 CSS 变量来解决这个问题。

.base-class {
  transform: scale(var(--scale, 1.2)) translateX(var(--translate-x, 5px));
}
.big {
  --scale: 2;
}
.move {
  --translate-x: 100px;
}

如您所见，我们现在只更改 CSS 变量，而从未修改实际transform属性。

结论

总体而言，CSStransform非常有用，同时也非常易于理解。到目前为止，最难的部分transform是理解如何跨不同类组合多个变换，但在 CSS 变量的帮助下，这个问题是微不足道的。