使用 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中文网其他相关文章！
