CSS Transform Origin

这个 CSS 属性用于改变变换元素的定位。它是应用变换的中心点。它建立了元素变换的原点。它既可以应用于 2D 旋转，也可以应用于 3D 旋转。

transform-origin 属性必须与 transform 属性一起使用。2D 变换 可以改变元素的 x 轴和 y 轴，而 3D 变换 除了 x 轴和 y 轴外，还可以改变 z 轴。

这个属性可以通过使用一个、两个或三个值来指定。第一个值影响水平位置，第二个值影响垂直位置，第三个值表示 z 轴的位置。第三个值也可以用于 3D 变换，不能使用百分比定义。

如果我们只指定一个值，该值必须是长度或百分比，或关键字值 left、center、right、top 和 bottom 之一。

如果我们指定两个值，第一个值必须是长度或百分比，或关键字值 left、right 和 center。第二个值必须是长度或百分比，或关键字值 center、top 和 bottom 之一。

当我们指定三个值时，前两个值与两值语法相同，但第三个值表示 z 偏移量，因此它必须是一个长度值。

transform-origin 属性的默认值是 50% 50%，它表示元素的中心。

注意：如果我们要使用 transform-origin 属性，那么 transform 属性是必须使用的。

语法

transform-origin 是上述语法中的 CSS 属性，该属性的值以表格形式描述，如下所示

该属性的值列表如下。

让我们通过一些示例来理解这个属性。

使用一个值时的 2D 变换示例

插图 1

我们将使用 transform-origin 属性，并以像素为单位给它一个长度值。我们将使用 transform 属性给元素一个旋转。

代码

输出

我们可以在下面的输出中看到，transform-origin 属性使用一个长度值应用。

插图 2

我们将使用 transform-origin 属性，并以百分比形式给它一个值。我们将使用 transform 属性给元素一个旋转。

代码

输出

我们可以在下面的输出中看到，transform-origin 属性使用一个百分比值应用。

插图 3

我们将使用 transform-origin 属性，并给它一个关键字值。然后我们将使用 transform 属性旋转元素。

代码

输出

这是输出，我们可以在其中看到 transform-origin 属性使用一个关键字值应用。

使用两个值时的 2D 变换示例

插图 1

我们将使用 transform-origin 属性，并以像素为单位给它两个长度值。

代码

输出

在下面的输出中，我们可以看到 transform-origin 属性通过指定两个值（即 x 轴和 y 轴的长度值）应用。

插图 2

我们将使用 transform-origin 属性，并以百分比形式给它两个值。

代码

输出

在下面的输出中，我们可以看到 transform-origin 属性通过指定两个值（即 x 轴和 y 轴的百分比值）应用。

插图 3

在此示例中，我们使用关键字值应用 transform-origin 属性来指定元素的位置。我们将使用变换元素的背景作为图像。

代码

输出

在下面的输出中，我们可以看到 transform-origin 属性通过指定两个值（即 x 轴和 y 轴的关键字值）应用。

3D 变换示例

现在，让我们对具有 3D 变换的元素应用 transform-origin 属性。我们必须为 3D 变换使用三个值。前两个值（即 x 轴和 y 轴）可以是长度、百分比或关键字，但第三个值（即 z 轴）必须仅为长度。

插图 1

在此演示中，我们将使用 transform-origin 属性，并指定三个长度值。我们将给 transform 属性一个 rotation3d() 函数值用于 3D 变换。

代码

输出

我们可以看到，transform-origin 属性通过指定三个长度值（即 x 轴、y 轴和 z 轴值）应用。

插图 2

在此示例中，我们将使用 transform-origin 属性，并以百分比形式给出 x 轴和 y 轴值，以长度形式给出 z 轴值。我们还将给 transform 属性一个 rotation3d() 函数值用于 3D 变换。

代码

输出

我们可以看到，transform-origin 属性通过指定三个值（即 x 轴和 y 轴的百分比值以及 z 轴的长度值）应用。

插图 3

在此示例中，我们将使用 transform-origin 属性，并以关键字形式给出 x 轴和 y 轴值，以长度形式给出 z 轴值。我们将给 transform 属性一个 rotation3d() 函数值用于 3D 变换。

代码

输出

结论

本文向我们介绍了 CSS transform origin。transform-origin 属性指定变换元素的中心点。变换有两种类型：2D 和 3D。2D 变换 改变元素的 x 轴和 y 轴，而 3D 变换 改变元素的 x 轴、y 轴 和 z 轴。