jQuery zmiana rozmiaru obróconych elementów

Question

Szukałem tego problemu, ale nie znalazłem na razie ostatecznego rozwiązania lub przykładu, aby go rozwiązać. Używając jQuery, gdy obracam zmienną wielkość, uchwyty i kolejne operacje zmiany rozmiaru są wygładzane. Jak mogę to rozwiązać lub obejść? Oto przykład tego, co mówię: http://jsfiddle.net/LVU7c/

Kod na skrzypcach jest:

$('#widget').resizable({ handles: 'n, e, s, w' }); 

i CSS, aby obrócić prosty div tag 90 stopni.

Answer 1

Podstawowa koncepcja została opublikowana przez Linus Gudn Jokela, która usunęła odpowiedź i nie przywróciła jej pomimo mojej prośby.

Można użyć obróconego owinięcia wewnętrznego dla zawartości, a następnie dołączyć uchwyty zmiany rozmiaru do elementu zewnętrznego, który pozostaje niezabezpieczony.

Kod JS będzie potrzebny, aby zachować synchronizację treści z kontenerem pod względem wysokości i szerokości. Powyżej znajduje się pełna demonstracji: http://jsfiddle.net/fXthv/

JS:

$('#widget').resizable({ 
    handles: 'n, e, s, w', 
    resize: function(){ 
     correct(this); 
    } 
}); 

function correct(el) { 
    var widget = $('#widget_content'), 
     deg = widget.data("rotate"); 
    if (typeof deg == "number") { 
     widget.css({ 
      width: (function() { 
       if (deg % 180 == 0) return $(el).outerWidth() 
       else return $(el).outerHeight() 
      })(), 
      height: (function() { 
       if (deg % 180 == 0) return $(el).outerHeight() 
       else return $(el).outerWidth() 
      })(), 
      marginLeft: (function() { 
       if (deg % 360 == 90) return $(el).outerWidth(); 
       else if (deg % 360 == 180) return $(el).outerWidth(); 
       else return 0; 
       //else if (deg % 360 == 270) return $(el).outerWidth(); 
      })(), 
      marginTop: (function() { 
       if (deg % 360 == 270) return $(el).outerHeight(); 
       else if (deg % 360 == 180) return $(el).outerHeight(); 
       else return 0; 
       //else if (deg % 360 == 270) return $(el).outerWidth(); 
      })() 
     }); 
    } 
} 

CSS:

#widget { 
    width: 100px; 
    height: 100px; 
    background-color: #cecece; 
} 
#widget_content { 
    margin-left:100px; 
    width: 100px; 
    height: 100px; 
    background-image: url(http://aux.iconpedia.net/uploads/2106003206.png); 
    background-size: 100% 100%; 
    /* removing the styles below will make the image appear as expected */ 
    -webkit-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    /* IE 9 */ 
    -moz-transform:rotate(90deg); 
    /* Firefox */ 
    -webkit-transform:rotate(90deg); 
    /* Safari and Chrome */ 
    -o-transform:rotate(90deg); 
    /* Opera */ 
} 

HTML:

<div id="widget"> 
    <div id="widget_content"></div> 
</div>