Question

我正在尝试使用javascript和css属性转换和transform-origin旋转容器，想法是围绕某些坐标旋转它（例如两个手指之间的捏手势中心），我正在使用这个简单现在代码（附加片段）旋转容器并使用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

问题是，每次单击时，div都会根据您单击的位置更改位置。首次点击后，您应该保存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。

请注意旋转容器上的变换和变换原点锚点

1 个答案: