保持旋轉容器上的變換和變換原點錨點

Question

我想旋轉一個容器與JavaScript和CSS屬性變換和變換原點，想法是圍繞某些座標旋轉它（例如捏手勢兩根手指之間的中心），我現在使用這個簡單的代碼（片段附加）來旋轉容器並使用onclick事件來捕獲錨點。只要不移動光標到容器上的不同位置，它就可以正常工作。當容器旋轉後改變點擊位置時會出現問題，預期的行爲是跟蹤轉換並開始爲新點旋轉，但現在容器正在進行奇怪的跳躍。我認爲需要將一些x，y翻譯添加到容器中，但我可以找出添加到容器的正確因素。

我不確定我是否已經很好地說明了預期的行爲，以確保這裏是一個例子：假設您在某個位置固定一個音符到曲面，然後開始旋轉音符，錨點。現在，稍稍旋轉音符後，您將銷釘（將音符保持在同一位置），然後將該銷釘放在音符上的不同位置，然後再使用該新的定位點旋轉。這是預期的行爲，希望我已經很好地解釋了自己。

這裏有一個片段可以更好地展示它，也可以在codepen上喝彩，歡呼聲。

http://codepen.io/vasilycrespo/pen/GZeYpB

var angle = 15, 
 
    scale = 1, 
 
    origin = { x: 0, y: 0}; 
 
    
 
var transform = function (e) { 
 
    var map = document.getElementById("map"); 
 
    angle += 15; 
 
    map.style.transformOrigin = e.pageX + "px " + e.pageY + "px"; 
 
    map.style.transform = "rotate("+angle+"deg) scale("+ scale +")"; 
 
};

.content{ 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    margin-top:0; 
 
    margin-left:0; 
 
    background-color: #ccc; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.square{ 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 400px; 
 
    background-image: url(http://www.pnas.org/site/misc/images/15-02545.500.jpg); 
 
    background-size: cover; 
 
}

<div class="content" onclick="transform(event)"> 
 
    <div class="square" id="map"></div> 
 
</div>

Answer 1

的問題是，你每次點擊時，格根據您單擊的位置改變位置。第一次點擊後，您應該保存e.pageX和e.pageY，並在下次點擊時應使用保存的值。您可以將您的transform功能更改爲：

var transform = (function() { 
    var pageX, pageY; 
    return function(e) { 
    if (typeof pageX === "undefined") { 
     pageX = e.pageX 
     pageY = e.pageY 
    } 
    var map = document.getElementById("map"), xr; 
    angle += 15; 
    map.style.transformOrigin = pageX + "px " + pageY + "px"; 
    map.style.transform = "rotate("+angle+"deg) scale("+ scale +")"; 
    } 
}()) 

請參閱updated Code Pen。