用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 中的元素操作和動畫開啟了各種創造性的可能性。