用javascript旋转图像
我需要以90度的间隔使用JavaScript旋转图像。 我已经尝试了像jQuery旋转和Raphaël几个库，但他们有同样的问题 – 图像旋转中心。 我在图像的各个方面都有一堆内容，如果图像不是完全正方形的，那么其中的部分内容将最终放在该内容之上。 我想要图像留在其父div，其中有最大和最大高度设置。
使用jQuery像这样旋转（ http://jsfiddle.net/s6zSn/1073/ ）：
var angle = 0; $('#button').on('click', function() { angle += 90; $("#image").rotate(angle); }); 结果在这：
而这是我想要的结果：
任何人都有如何完成这个想法？
你可以使用CSS的transform （必要时使用供应商前缀）和transform-origin （如下所示）（也可以在jsFiddle上）
var angle = 0, img = document.getElementById('container'); document.getElementById('button').onclick = function() { angle = (angle + 90) % 360; img.className = "rotate" + angle; }
#container { width: 820px; height: 100px; overflow: hidden; } #container.rotate90, #container.rotate270 { width: 100px; height: 820px } #image { transform-origin: top left; /* IE 10+, Firefox, etc. */ -webkit-transform-origin: top left; /* Chrome */ -ms-transform-origin: top left; /* IE 9 */ } #container.rotate90 #image { transform: rotate(90deg) translateY(-100%); -webkit-transform: rotate(90deg) translateY(-100%); -ms-transform: rotate(90deg) translateY(-100%); } #container.rotate180 #image { transform: rotate(180deg) translate(-100%, -100%); -webkit-transform: rotate(180deg) translate(-100%, -100%); -ms-transform: rotate(180deg) translateX(-100%, -100%); } #container.rotate270 #image { transform: rotate(270deg) translateX(-100%); -webkit-transform: rotate(270deg) translateX(-100%); -ms-transform: rotate(270deg) translateX(-100%); }
<button id="button">Click me!</button> <div id="container"> <img src="http://i.stack.imgur.com/zbLrE.png" id="image" /> </div>
var angle = 0; $('#button').on('click', function() { angle += 90; $('#image').css('transform','rotate(' + angle + 'deg)'); });
试试这个代码。
CSS可以被应用，你将不得不正确设置transform-origin来以你想要的方式得到应用的转换
看小提琴：
http://jsfiddle.net/OMS_/gkrsz/
主要代码 ：
/* assuming that the image's height is 70px */ img.rotated { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform-origin: 35px 35px; -webkit-transform-origin: 35px 35px; -moz-transform-origin: 35px 35px; -ms-transform-origin: 35px 35px; }
jQuery和JS ：
$(img) .css('transform-origin-x', imgWidth / 2) .css('transform-origin-y', imgHeight / 2); // By calculating the height and width of the image in the load function // $(img).css('transform-origin', (imgWidth / 2) + ' ' + (imgHeight / 2) );
逻辑 ：
将图像的高度除以2. transform-x和transform-y值应该是这个值
链接 ：
在CSS | transform-origin MDN
我已经看到你的运行代码。你的代码中有一行更正。 写$（“＃wrapper”）。rotate（angle）; 而不是$（“＃image”）。rotate（angle）; 你会得到你想要的输出，希望这是你想要的。
希望这可以帮到你！
<input type="button" id="left" value="left" /> <input type="button" id="right" value="right" /> <img src="https://www.google.comhttp://img.dovov.comsrpr/logo3w.png" id="image"> <script> var angle = 0; $('#left').on('click', function () { angle -= 90; $("#image").rotate(angle); }); $('#right').on('click', function () { angle += 90; $("#image").rotate(angle); }); </script>
尝试一下
您可以随时使用rotate属性应用CCS类 – http://css-tricks.com/snippets/css/text-rotation/
要保持旋转的图像在你的div尺寸内，你还需要调整CSS，除了添加类之外，没有必要使用JavaScript。
