jquery图像旋转和缩放问题_编程设计

我正在尝试向网页添加功能，以允许用户旋转和放大图像。我发现了许多允许缩放的 jquery 插件。但没有一个也进行旋转。因此，我尝试使用 jquery 插件进行缩放/平移，并结合 CSS 来处理旋转，但到目前为止尚未成功。在添加 jquery 插件之前或之后应用 CSS 似乎并不重要。或者将它们链接在一起(再次尝试在缩放插件之前和之后旋转以进行链接，但似乎没有任何效果)。

供引用，我的代码如下:

HTML:

<body> 
    <script src="scripts/jquery-1.6.4.js" type="text/javascript"></script> 
    <script src="zoom_assets/jquery.smoothZoom.min.js" type="text/javascript"></script> 
    <script src="scripts/PictureViewer_SmoothZoom.js" type="text/javascript"></script> 
 
    <img src="images/leaftemple11680.jpg" id="leafTemple" /> 
</body>

CSS:

.rotate90Left{ 
    /* for firefox, safari, chrome, etc. */ 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    /* for ie */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

JavaScript:

//jquery chain - add CSS second 
$(document).ready(function(){ 
 
    $('#leafTemple').smoothZoom({ 
        width: 480, 
        height: 360 
    }).addClass('rotate90Left'); 
 
});

我使用的缩放/平移插件来自这里:

http://codecanyon.net/item/smooth-zoom-pan-jquery-image-viewer/511142

请您参考如下方法:

问题是，SmoothZoom使用-webkit-transform来放大图片，并将数据作为内联样式放在图像上，如下所示:

<img style="-webkit-transform: translate3d(0px, 0px, 0px) scale(0.46875);" />

.rotate90left 附带的 CSS 样式将被内联样式覆盖。

一种解决方案:旋转包装器，而不是图像本身......