用translate模拟transform-origin：综合指南

理解Transform-Origin

Transform-origin属性指定元素围绕其进行自身变换的点。设置此属性可以让我们更精确地控制元素的旋转、缩放或倾斜。

Simulate Transform-Origin with Translate

CSS 官方文档指出可以使用平移变换来模拟变换原点。过程如下：

• 将元素平移transform-origin属性的负值。
• 应用所需的变换（例如缩放、旋转）。
• 将元素平移回transform-origin属性的值。

错误结果疑难解答

如果您尝试使用来模拟transform-origin翻译失败，您可能遇到了两个常见错误之一：

错误1：翻译顺序不正确

变换源模拟涉及三个翻译操作：初始取反翻译、期望的转换以及最终的正翻译。以正确的顺序执行这些翻译至关重要。

示例：

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

在这个例子中，初始翻译是正确的，但最终翻译应该是translate(100px, 100px)而不是translate(-100px, -100px)，以否定初始翻译并将元素恢复到原来的状态原始位置。

错误2：不匹配的Transform-Origin

确保具有transform-origin的原始元素和使用translate模拟的元素具有相同的transform-origin 。默认的变换原点是元素的中心，在这两种情况下显式设置它或将其保留为默认值至关重要。

示例：

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

此处，transform-origin 已显式设置为元素的左上角，这与原始元素的默认transform-origin 相匹配。

结论

通过纠正这些错误并确保正确的翻译顺序和变换原点，您可以使用平移变换有效地模拟变换原点。这项技术为 CSS 中的元素操作和动画开辟了各种创造性的可能性。