Question

jquery如何同时实现旋转,与局部放大

求教各位，jquery如何同时实现旋转，与局部放大？目前我是鼠标点击后，获取当前图片的xy然后进行放大，但是当图片旋转后放大得到的并不是我想要的效果。旋转后获取的坐标是原图的坐标，并不是旋转图片的真是坐标。如何获得图片旋转后的真是坐标？

Answer 1

旋转效果有2d旋转、3D旋转.你可以baidu搜索下css3 Transform ，就可以实现
放大效果：可以通过jquery animate方法改变图片的width，height属性实现。如：$("p").animate({
width:"500px",height:"500px"
}, "normal");

Answer 2

用css3吧，方便一点

Answer 3

.a:hover{ transform: rotate(90deg) scale(3.0); transition: all 1s;}

Answer 4

　　html代码：
<div id="idContainer"> </div>
<input id="idLeft" type="button" value="向左旋转" />
<input id="idRight" type="button" value="向右旋转" />
<input id="idVertical" type="button" value="垂直翻转" />
<input id="idHorizontal" type="button" value="水平翻转" />
<input id="idReset" type="button" value="重置" />
<input id="idSrc" type="text" value="images/2.jpg" />
<input id="idLoad" type="button" value="换图" />
　　jquery代码实现旋转,与局部放大：
var container = $$("idContainer"),src = "images/1.jpg",
options = {
onPreLoad: function(){ container.style.backgroundImage = "url('images/1.jpg')"; },
onLoad: function(){ container.style.backgroundImage = ""; },
onError: function(err){ container.style.backgroundImage = ""; alert(err); }
},
it = new ImageTrans( container, options );
it.load(src);
//垂直翻转
$$("idVertical").onclick = function(){ it.vertical(); }
//水平翻转
$$("idHorizontal").onclick = function(){ it.horizontal(); }
//左旋转
$$("idLeft").onclick = function(){ it.left(); }
//右旋转
$$("idRight").onclick = function(){ it.right(); }
//重置
$$("idReset").onclick = function(){ it.reset(); }
//换图
$$("idLoad").onclick = function(){ it.load( $$("idSrc").value ); }

Answer 5

css3样式.。。。。。