使用CSS3變換來圍繞鼠標點擊位置的中心視口

我希望能夠幫助您解決以下問題：我想使用CSS3變換來圍繞鼠標單擊位置居中瀏覽器的視圖端口。請看我的評論示例http://jsfiddle.net/XjpdU/。使用CSS3變換來圍繞鼠標點擊位置的中心視口

我的問題是翻譯只在第一次點擊時才能正常工作。第一次點擊後，視圖中心與鼠標點擊位置之間的距離似乎可以正確計算，但翻譯似乎只是在任何地方跳轉。

我試圖顯式設置'transform-origin'（在我的例子中是-webkit-translate-origin）到最後一次點擊的位置（即視圖的當前中心），但似乎與'翻譯''變換原點'指令只是被忽略。爲幫助了Y！

沒錯

謝謝，變換原點對翻譯沒有影響。它的工作原理是這樣的：

從單位矩陣開始。

在「變換」屬性翻譯由「變換原點」

乘法的計算X，Y和Z值由每個變換函數進而

由負計算X翻譯，Y和Z值「變換出身」的

你可以做的是記住了翻譯，並添加新計算的給它，這將導致一個相對平移開始FR前一點。

x = prevX = prevX + newX 
y = prevY = prevY + newY

2012-10-05 22:20:55 ndm

非常感謝您的解決方案！ –

不客氣:)請注意，建議您將已解決問題的問題標記爲已接受的問題（旁邊的小複選標記），這不僅是關於聲譽，還有助於他人選擇正確的信息（假設是更多的答案），這是其他提問者和答覆者的問題解決的指標，而其他人會在他們發現問題得不到解決時回答您的問題。 – ndm

回答