旋转图像瓦特/ jQuery的...但调整大小不工作

Question

我有一个图像，需要旋转。此图像面向横向或纵向。

我有一个HTML5表单来接受每次点击90步的旋转角度。当这个值改变时，图像应该旋转并调整大小。它应该始终是770px宽，但可以像它需要的一样高。

我已经写了下面的事件处理程序，但它没有按我期望的方式工作。

用例：当图像是纵向时，它的初始值是770x1027（w x h）。当旋转90度时，我期望下面的函数旋转图像，设置width = 1027和height = 770.但是我所看到的是宽度和高度都设置为770.我没有看到什么？

$("#degrees").change(function(){ 
    var element$ = $("#photo-submission"), 
     w = element$.width(), 
     h = element$.height(), 
     deg = $(this).val(); 


    element$.removeAttr("style").attr({ 
     "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ h +"px; height: "+ w + "px;" 
    }) 
}); 

Answer 1

您似乎已切换宽度和高度。

element$.removeAttr("style").attr({ 
    "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ w +"px; height: "+ h + "px;" 
}) 

Answer 2

如何与jQuery的方法改变CSS属性实际作出尝试它，这样它会更容易让你的变量的轨迹，并把他们在正确的地方：

$("#degrees").change(function(){ 
    var el = $("#photo-submission"), 
     w = el.width(), 
     h = el.height(), 
     deg = this.value; 

    el.css({ 
     '-webkit-transform' : 'rotate(' +deg+ 'deg)', 
     width : w, 
     height : h 
    }); 
}); 

FIDDLE

这样做的真正优点是，您不必将宽度和高度设置为现在的大小，这基本上就是您正在做的事情，所以这已经足够了

$("#degrees").change(function(){ 
    $("#photo-submission").css({ 
     '-webkit-transform' : 'rotate(' + this.value + 'deg)' 
    }); 
});