如何只使用'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. 平移原點：最後，使用正負變換原點值將原點平移回其原始位置。此步驟可確保原點重置到其預期位置。

不正確的範例：

在提供的範例中，問題是翻譯不正確。正確應用了變換原點的負值，但缺少最終翻譯。以下更正後的程式碼將產生準確的結果：

正確範例：

此修正範例包括最終的翻譯步驟，這是恢復原點所必需的到其預定位置。因此，這些盒子將表現出相同的變換外觀，證明變換原點確實可以使用transform:translate來模擬。

以上是如何只使用'transform:translate”來模擬CSS'transform-origin”？的詳細內容。更多資訊請關注PHP中文網其他相關文章！