Translate 可以代替 Transform-Origin 吗？

使用 Translate 模拟 Transform-Origin：揭开秘密

CSS 的 transform-origin 属性提供了对变换原点的无与伦比的控制。但是，如果您按照以下步骤操作，您可以使用纯转换：翻译巧妙地复制其功能：

1.反转翻译：

与您最初的尝试相反，您必须反转翻译值才能获得正确的结果。这是因为translate 将正值解释为向右或向下移动，而transform-origin 则从左上角开始测量。

2.对齐变换原点：

默认变换原点设置为元素的中心。为了使您的模拟正常工作，请将使用平移技术转换的元素的变换原点与左上角 (0, 0) 对齐。

示例：

考虑这个修改后的代码：

.origin {
  transform-origin: 50px 50px;
  transform: rotate(45deg) scale(2);
}

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

通过遵循这些原则，您可以有效地模拟使用translate 进行transform-origin，使您能够轻松解锁微妙的转换。

以上是Translate 可以代替 Transform-Origin 吗？的详细内容。更多信息请关注PHP中文网其他相关文章！