如何仅使用'transform:translate”来模拟CSS'transform-origin”？

在 CSS 中使用 Translate 模拟 Transform-Origin

在 CSS 中，transform-origin 属性定义将转换应用于元素的原点。需要注意的是，该属性的应用方式是首先通过元素自身的 transform-origin 属性的负值来平移元素，然后应用元素的变换，然后通过属性值进行平移。

来模拟使用transform：translate的transform-origin的行为，需要执行以下步骤：

1. 对transform-origin值取反：在应用之前需要对transform-origin的值取反他们作为翻译。这是因为平移变换将对原点应用负值，从而有效地反转原点。
2. 应用元素的变换：对变换原点值求反后，元素的变换可以像往常一样应用。
3. 平移原点：最后，使用正负变换原点值将原点平移回其原始位置。此步骤可确保原点重置到其预期位置。

不正确的示例：

在提供的示例中，问题是翻译不正确。正确应用了变换原点的负值，但缺少最终翻译。以下更正后的代码将产生准确的结果：

.origin {
  transform-origin: 100px 100px;
  transform: translate(100px, 0px) scale(2) rotate(45deg);
}

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) **translate(100px, 100px)**;
}

正确示例：

此更正示例包括最终的翻译步骤，这是恢复原点所必需的到其预定位置。因此，这些盒子将呈现出相同的变换后的外观，证明变换原点确实可以使用transform:translate来模拟。

以上是如何仅使用'transform:translate”来模拟CSS'transform-origin”？的详细内容。更多信息请关注PHP中文网其他相关文章！