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

Question

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

下面是一个例子
JSFiddle

当我改变宽度，例如，对象失去其原始位置，这是实现jQueryUI的可调整大小并使其无法使用。

CSS：

.test{ 
    position: absolute; 
    top: 200px; 
    left; 200px; 

    width: 400px; 
    height: 200px; 
    background: red; 

    transform: rotate(-90deg); 
} 

JSFiddle
是否有库或通过逆转这种效果可以解决此问题的功能。

编辑： 我做了一个jQuery函数，它可以在调整旋转元素的大小时将左上角的位置更正为新的答案。 同样这是一个patch for jqueryui resizable

Answer 1

This jQu ERY功能将改变元素的大小并进行必要的修正，以保持左上角位置

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}); 
    }); 
} 

另一个有用的功能：的

/** 
* 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; 
} 

Answer 2

transform-origin被默认设置为centre，并且当改变该元件的宽度/高度，原始中心移动，从而移动您的对象。

看到这个更新的小提琴，用一个固定的宽度变化http://jsfiddle.net/ww8k4hy4/6/

编辑

设置的transform-origin两个值是半宽的 - 看到这一点：http://jsfiddle.net/ww8k4hy4/10/

（搞清楚这一点对我来说也很有帮助，所以谢谢:)）