改变宽度/高度移动旋转元素

当改变旋转元素的宽度/高度时，元素移动！

这是一个例子
的jsfiddle

例如，当我更改宽度时，对象将失去其原始位置，这会影响jQueryUI Resizable并使其无法使用。

CSS：

.test{ position: absolute; top: 200px; left; 200px; width: 400px; height: 200px; background: red; transform: rotate(-90deg); } 

的jsfiddle
是否存在通过反转此效果来纠正此问题的库或函数。

编辑：我做了一个jQuery函数，在调整旋转元素大小时修正左上角位置，作为答案添加。 这也是jqueryui可resize的补丁

Answer 1

transform-origin默认设置为centre ，当您更改元素的宽度/高度时，原始中心会移动，从而移动对象。

看到这个更新的小提琴，修改宽度http://jsfiddle.net/ww8k4hy4/6/

编辑

将transform-origin两个值设置为宽度的一半 – 请参阅： http ： //jsfiddle.net/ww8k4hy4/10/

（事实certificate这对我来说非常有帮助，所以谢谢:)）

Answer 2

这个jQuery函数将改变元素的大小并进行必要的修正以保留左上角的位置

的jsfiddle

 /** * Resizes rotated set of elements and preserves top-left corner position * @param {Number} new_width * @param {Number} new_height * @param {Number} angle in degrees * @returns {object} the current jQuery set */ $.fn.rotSize = function(new_width, new_height, angle){ //Convert angle from degrees to radians var angle = angle * Math.PI / 180 $(this).each(function(i, elem){ var $elem = $(elem); //initial CSS position. var pos = {left: parseInt($elem.css('left')), top: parseInt($elem.css('top'))}; var init_w = $elem.width(); var init_h = $elem.height(); //Get position after rotation with original size var x = -init_w/2; var y = init_h/2; var new_x = y * Math.sin(angle) + x * Math.cos(angle); var new_y = y * Math.cos(angle) - x * Math.sin(angle); var diff1 = {left: new_x - x, top: new_y - y}; //Get position after rotation with new size var x = -new_width/2; var y = new_height/2; var new_x = y * Math.sin(angle) + x * Math.cos(angle); var new_y = y * Math.cos(angle) - x * Math.sin(angle); var diff2 = {left: new_x - x, top: new_y - y}; //Get the difference between the two positions var offset = {left: diff2.left - diff1.left, top: diff2.top - diff1.top}; //Calculate the correction var new_pos = {left: pos.left - offset.left, top: pos.top + offset.top}; //Apply $elem.css(new_pos); $elem.css({width: new_width, height: new_height}); }); } 

另一项有用function：

 /** * Calculate the size correction for resized rotated element * @param {Number} init_w * @param {Number} init_h * @param {Number} delta_w * @param {Number} delta_h * @param {Number} angle in degrees * @returns {object} correction css object {left, top} */ $.getCorrection = function(init_w, init_h, delta_w, delta_h, angle){ //Convert angle from degrees to radians var angle = angle * Math.PI / 180 //Get position after rotation with original size var x = -init_w/2; var y = init_h/2; var new_x = y * Math.sin(angle) + x * Math.cos(angle); var new_y = y * Math.cos(angle) - x * Math.sin(angle); var diff1 = {left: new_x - x, top: new_y - y}; var new_width = init_w + delta_w; var new_height = init_h + delta_h; //Get position after rotation with new size var x = -new_width/2; var y = new_height/2; var new_x = y * Math.sin(angle) + x * Math.cos(angle); var new_y = y * Math.cos(angle) - x * Math.sin(angle); var diff2 = {left: new_x - x, top: new_y - y}; //Get the difference between the two positions var offset = {left: diff2.left - diff1.left, top: diff2.top - diff1.top}; return offset; }