如何更改css轉換原點，但保留轉換

這個問題的更大的圖片是我有一個轉換的地圖需要響應觸摸手勢，它需要從用戶手勢的中心縮放和旋轉。如何更改css轉換原點，但保留轉換

變換原點需要在每個新手勢上都改變，但不改變旋轉和縮放比例，基本上我想添加一個平移來補償變換原點的變化？

或者如果有一種方法可以在改變變換原點的同時使用矩陣變換來保存變換？

2016-11-22 njorlsaga

沒有一個能夠重現問題的實際代碼片段，這是一個太寬泛的問題。 – LGSon

我不同意，問題是具體的，如何改變任意旋轉，縮放和平移元素的變換原點，但保留原始變換。 – njorlsaga

我相信有很多方法可以實現這個目標，但這聽起來像是你在正確的軌道上。我創建了一個codepen demo來將其原型化，看起來好像技巧是在開始時添加一個負偏移量，並在最後加上一個正偏移量。

.box { 
    transform: rotateX(45deg) scale(1.4); 
    transform-origin: 10px 10px; 
} 

.box.is-active { 
    transform: translate(-50px, -50px) rotateX(45deg) scale(1.4) translate(50px, 50px); 
    transform-origin: 60px 60px; 
}

我不知道這將如何表現更復雜的轉換，但它似乎與簡單的工作正常。

來源

2016-11-22 18:27:03

這很有趣，你能解釋一下那裏的負面情況，然後看看爲什麼需要這麼做嗎？它也看起來像值是變換的起源的三角洲是正確的？ – njorlsaga

也有興趣如何，如果你也已經對原單翻譯這會工作（這是我的情況） – njorlsaga

還因爲變換的操作順序是從右到左，負的翻譯中出現最後的吧？ – njorlsaga

如何更改css轉換原點，但保留轉換

回答

相關問題