Question

我有一个可以由用户轮换的内容。元素的大小为auto，这意味着它在您输入时会改变它的大小。问题是，如果你在旋转的时候在里面输入一些东西，它会移动 jsfiddle

Answer 1

问题是轮换次数是transform-origin，默认情况下为50% 50%。当尺寸改变时，旋转点也会改变，这会导致移动。您可以通过设置transform-origin字段（以像素为单位）来修复旋转点。在您键入时它不会移动，但如果您尝试更改旋转，它将不在元素中心周围（假设元素中心已经更改，因为您已设置它）。

因此，在更改旋转角度之前，您需要将transform-origin重置为元素的中心，但只要您这样做，元素的位置就会改变，因此您需要将位置更正为好。获取transform-origin更改前后边界框位置的差异，并将其添加到元素坐标中。这是一些代码（用Mootools框架编写）

 var correctRotatedElementPosition = function (element) {
      var old_position = element.getBoundingClientRect();
      var center = '50% 50%';
      element.setStyles({
         'transform-origin'         : center,
         '-webkit-transform-origin' : center,
         '-ms-transform-origin'     : center
      });

      var new_position = element.getBoundingClientRect();

      var current_coordinates = element.getStyles(['left', 'top']);

      var delta_left = old_position.left.toInt() - new_position.left.toInt();
      var delta_top  = old_position.top.toInt() - new_position.top.toInt();

      this.element.setStyles({
         'left'              : current_coordinates.left.toInt() + delta_left,
         'top'               : current_coordinates.top.toInt() + delta_top
      });
   }

用户输入时旋转的满足动作

1 个答案: