更改寬度/高度移動旋轉元素

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/

（搞清楚這一點對我來說也很有幫助，所以謝謝:)）